D3js之初窺

最近在作一個項目, 圖表是一個比較重要的功能, 可是以前並無接觸過可視化相關的東西, 固然不可能本身造一個輪子. 社區裏有不少優秀的圖表庫: echarts, g6, highcharts, chartjs以及d3等等. 首先咱們的項目重點並不在數據呈現, 也就是highcharts和chartjs首先被排除了. 其次我每太研究過canvas, 加上咱們的項目比較緊, 最終肯定了使用d3.

d3的文檔不算太友好 這裏推薦devdocs, 搜索關鍵字什麼的仍是很方便的. d3目前的狀況是v3和v4都有不少人使用, 而且官網的例子還以v3爲主, 因此選3仍是4也是一個使人頭疼的問題. 最終秉承這喜新厭舊的原則, 我仍是選擇了v4.

d3和svg

可縮放矢量圖形（Scalable Vector Graphics，SVG)，是一種用來描述二維矢量圖形的XML 標記語言。 簡單地說，SVG面向圖形，HTML面向文本.

總之, 咱們只須要知道svg畫出的圖形能夠直接在頁面內顯示就好了. 更重要的是, 不一樣於canvas每一個變更都須要rerender, svg是基於dom的, 能夠添加事件 js的動畫函數也會對其生效, 對於新手可能更加友好一點,.

d3是基於svg的(v4添加了canvas支持), 因此d3有不少針對svg的操做append, attr等等, 至關一部分與svg原生方法相似.

那麼, 既然svg就能夠畫出圖表, 要d3作什麼呢? d3 固然是簡化svg建立圖表各類繁瑣的事情, 好比力導向圖的碰撞檢測之類.

一個簡單的圖表

效果以下:

代碼以下(直接在jsbin等內能夠直接運行):

var width = 300;  //畫布的寬度
var height = 300;   //畫布的高度

var svg = d3.select("body")     //選擇文檔中的body元素
    .append("svg")          //添加一個svg元素
    .attr("width", width)       //設定寬度
    .attr("height", height);    //設定高度
    
var dataset = [ 250 , 210 , 170 , 130 , 90 ];  //數據（表示矩形的寬度）

var rectHeight = 25;   //每一個矩形所佔的像素高度(包括空白)

svg.selectAll("rect")
    .data(dataset)
    .enter()
    .append("rect")
    .attr("x",20)
    .attr("y",function(d,i){
         return i * rectHeight;
    })
    .attr("width",function(d){
         return d;
    })
    .attr("height",rectHeight-2)
    .attr("fill","steelblue");
複製代碼

做爲入門示例咱們不須要懂得每一個方法的含義, 其實也沒辦法一一理解, 畢竟d3的方法實在太多了. 這麼簡單的圖表, 不管是svg仍是canvas均可以很簡單的不借助任何庫完成, 可是涉及到一系列強交互, 好比拖動, 力, 放大縮小, 轉動視角, 編輯等等, 我相信d3仍是最好的選擇.

最後幾句

其實選擇d3的還有一個很重要的緣由, 就是他與react能更好的結合, 相對於canvas類圖表, 不管你代碼操做粒度再細, 放在react組件裏的無非就是一個canvas元素. 而svg做爲dom呈如今jsx裏的可操做性應該是更強的. 之後有機會的話但願能總結出一篇來.