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里的可操做性应该是更强的. 之后有机会的话但愿能总结出一篇来.