D3.js入門

時間 2019-11-09

原文原文鏈接

D3.js是一個經過數據來操做文檔JavaScript庫。結合SVG，D3特別適合用於圖表的繪製，但D3自己並非一個圖表庫，它把數據綁定到DOM中，利用SVG輸出圖表。本文所講內容適用於v4.0+版本javascript

從v4.0開始，D3把各個模塊分離開來，各個模塊相互獨立，也就是說若是你只須要用到D3強大的數組操做部分，只需引用d3-array部分(例如npm install d3-array)，不須要引用全部的D3庫。這樣作可以使前端模塊化開發更加靈活，減少引用資源體積，節省性能html

用D3操做DOM元素

d3.select(selector) 返回匹配選擇器的第一個元素
d3.selectAll(selector) 返回匹配選擇器全部元素

好比d3.selectAll(‘p’)能夠選擇全部的p元素，d3.select(‘p’)只選擇第一個p元素前端

d3.select('p')
d3.selectAll('p')
複製代碼

還能夠選擇其餘經常使用的選擇器，包括派生選擇器，與document.querySelector和document.querySelectorAll方法十分相似java

d3.select('.chart')
d3.selectAll('.chart')
d3.select('#chart')
d3.select('.chart rect')
複製代碼

selection.append(type) 建立新元素並返回該元素
selection.remove() 從DOM中移除當前元素
selection.attr(name[,value]) 取得或設置屬性的值
selection.style(name[,value[,priority]]) 取得或設置元素的樣式

d3.select('body')
  .append('svg')
  .attr('width', 500)
  .attr('height', 500)
  .style('background', 'red')
  .remove()
複製代碼

上面的代碼首先在body中建立了一個svg標籤，而後給它設置高度和寬度，設置背景色，最後被刪除，D3的代碼風格基本採用鏈式寫法，由於大部分D3的方法都返回D3對象的實例，這和jQuery很是類似npm

在DOM元素中綁定數據

數據綁定是D3的最大特點，也是最讓入門者困惑的地方，D3中文全稱「數據驅動文檔」，主要的方法有兩個數組

selection.datum([value]) 爲每一個元素綁定值value

<body>
  <p>Dog</p>
  <p>Cat</p>
  <p>Monkey</p>
  <script type="text/javascript"> var p = d3.select('body').selectAll('p'); // 爲p元素集綁定數值1 p.datum(1); console.log(p); </script>
</body>
複製代碼

運行代碼查看控制檯，數值1已經被賦予了p標籤的**data**屬性了app

selection.data([data[,key]]) 爲每一個元素分別綁定對應data中數據值

data方法與datum方法的區別在於，data的參數是數組，分別分配給對應的DOM元素，每一個DOM元素獲得一個value值，而datum把相同參數均賦值給DOM元素，每一個元素獲得的數據值相同，data方法比較適用於平常數據需求，使用更多svg

<body>
  <p>Dog</p>
  <p>Cat</p>
  <p>Monkey</p>
  <script type="text/javascript"> var dataset = [1, 2, 3]; var p = d3.select('body').selectAll('p'); // 爲p元素集綁定數組dataset p.data(dataset); console.log(p); </script>
</body>
複製代碼

運行代碼查看控制檯，數值一、二、3分別綁定到了第一、二、3個p標籤模塊化

綁定數據後，就能夠利用綁定的數據作一些事情了，D3爲大部分操做DOM的方法添加了函數參數，該函數有兩個參數，一個表明綁定的數據，一般爲d，另外一個爲序數值，一般爲i函數

<body>
  <p>Dog</p>
  <p>Cat</p>
  <p>Monkey</p>
  <script type="text/javascript"> var dataset = [1, 2, 3]; var p = d3.select('body').selectAll('p'); // 更改p元素內的內容,d是數據值，i是序數值 p.data(dataset) .text(function(d, i) { return d + ' ' + i }); </script>
</body>
複製代碼

運行結果以下圖：

enter()與exit()的用法

在前面講數據綁定中，數組的長度與標籤數量是相等的，若是數據的長度不可控，會致使有些標籤沒有數據，有些數據沒有標籤匹配，這個時候就要用到enter與exit方法了

selection.enter() 爲缺失的元素返回佔位符

<body>
  <p>Dog</p>
  <script type="text/javascript"> var dataset = [1, 2, 3]; var p = d3.select('body').selectAll('p'); // 目前只有1個元素，3個數據值 enter = p.data(dataset).enter(); console.log(enter); </script>
</body>
複製代碼

查看控制檯，發現出現了2個並不真實存在的EnterNode，綁定了剩餘的數據，這就是enter部分，若是後面繼續添加新的標籤，標籤會被自動綁定剩餘數據

selection.exit() 返回沒有被綁定數據的元素

<body>
  <p>Dog</p>
  <p>Cat</p>
  <p>Monkey</p>
  <script type="text/javascript"> var dataset = [1]; var p = d3.select('body').selectAll('p'); // 目前有3個元素，只有1個數據值 exit = p.data(dataset).exit(); console.log(exit); </script>
</body>
複製代碼

查看控制檯，有2個標籤並無綁定數據，這就是exit部分，能夠把多餘的exit部分移除掉

交互與動畫

selection.on(typenames[,listener[,capture]])

D3的事件綁定很是簡單，與jQuery的on方法同樣，指定事件類型後，調用回調函數

<body>
  <p>Dog</p>
  <script type="text/javascript"> var p = d3.select('body').select('p'); p.on('click', function() { d3.select(this).text('Cat'); }) </script>
</body>
複製代碼

selection.transition([name])

在元素之間加入transition方法，就能造成炫酷的過渡動畫

<body>
  <div></div>
  <script type="text/javascript"> var div = d3.select('body').select('div'); div.style('width', '200px') .style('height', '200px') .style('background', 'red') .transition() .style('width', '400px'); </script>
</body>
複製代碼

1. d3.js 入門指南
2. D3.js入門指南
3. D3.js從入門指南
4. D3.js 入門系列3
5. D3.js 入門學習(一)
6. D3.js從入門到「放棄」指南
7. d3.js 入門指南 - 儀表盤
8. 【譯】D3入門
9. D3入門
10. d3.layout.force()---入門篇
更多相關文章...
• Memcached入門教程 - NoSQL教程
• Neo4j數據庫入門教程 - NoSQL教程
• YAML 入門教程
• Java Agent入門實戰（一）-Instrumentation介紹與使用

相關標籤/搜索

springboot2.0+neo4j+d3.js

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。