D3是用于数据可视化的Javascript库。使用SVG,Canvas和HTML。结合强大的可视化技术和数据驱动的DOM操作方法。
D3与JQuery的区别 D3是数据驱动的,JQuery不是:我们使用JQuery直接操纵元素;但是使用D3 时我们需要通过D3专有的data(),enter()和exit()方法提供数据和回调,然后D3操作元素。 D3通常用于数据可视化;JQuery用于创建Web应用。D3有很多数据可视化扩展;JQuery有很多Web应用插件。两者都是Javascript DOM操作库,提供CSS选择器和流畅的API。
What is the difference between D3 and JQuery?
最常用的方法
d3.select(selector):选择第一个匹配selector的元素。如果没有匹配的元素,返回一个空的选择(但不是null或undefined)。
d3.selectAll(selector):与select()不同的是,会选择所有匹配的元素。
selection.append(type):如果指定的type是一个字符串,则将这个type(标签名称)作为新元素附加到每个选定元素的最后一个子元素。
selection.attr(name,[value]):value确定时,将selection中名为name的属性值设置成value。value可以为常量或者方法。如果value没有给出,返回selection中第一个非空元素的name属性当前值。
selection.data([data[,key]]):将数据和元素绑定起来,并返回一个新的selection。
selection.enter():返回enter selection。此时DOM元素少于对应的数据。用于添加缺少的DOM元素。比如:
如果body是空的,上面的代码就会根据数据创建新的div元素,然后添加到body元素中,并将文本内容设置为对应的数字。页面结果如下:
selection.exit():返回exit selection。此时DOM元素多于对应的数据。用于移除多余的DOM元素。比如,基于上面的例子,我们要更新数据:
div = div.data([1,2,4,32],function(d) { return d; });
因为此时指定了key方法(用于指定数据和元素匹配的顺序等),并且数据[4,16]匹配已经存在的元素,所以update selection只包含3个div元素。我们可以使用enter selection添加3个新元素:
div.enter().append("div").text(function(d) { return d; });
然后,还需要移除不需要的元素[15,42]:
div.exit().remove();
页面结果:
制作柱状图
柱状图示例
使用D3的时候,要对SVG的结构有一个了解。要绘出什么图形,需要用到什么标签,标签需要定义什么属性。 比如,制作一个柱状图,主要是XY坐标轴和柱形。XY轴用到line标签绘制直线,以及text标签显示刻度的文字。柱形用到rect标签绘制长方形,那如果要带圆角的长方形,我们可以设置rect标签的rx或ry属性,如果要定义长方形的位置,需要设置x和y属性等。就这样,一部分一部分的组合到一起成为一张图。
以下的内容是基于D3 3.x 的API,有些接口跟D3 4.0是不同的。 D3 3.x API Reference D3 4.0 API Reference
根部的svg
坐标轴 制作坐标轴首先需要用到D3的比例尺。用到方法 axis.scale([scale]) ,设置坐标轴的比例尺,或者返回当前的比例尺。比例尺分为:
定量比例尺:连续的数据,比如数字。时间比例尺:数据是时间。序数比例尺:离散的数据,比如名称,类别等。
比如我们要制作一个有时间刻度的X轴和一个数字刻度的Y轴,就可以使用时间比例尺和定量比例尺,或者更具体的说,线性比例尺。
d3.scale.linear():创建一个线性比例尺。 d3.time.scale():创建一个时间比例尺。刻度和刻度格式配置为本地时间。
确定比例尺之后还需要设置输入域和输出范围。比如一个x轴的比例尺为:
最小日期和最大日期都是Date对象。然后设置X坐标轴的比例尺并创建它:
<div class="jb51code">
<pre class="brush:js;">
//生成x坐标轴
var xAxis = d3.svg.axis() //新建一个默认的坐标轴
.scale(x) //设置比例尺
.ticks(d3.time.day,1) //指定刻度生成的方式
.tickFormat(function(d){ //自定义刻度文字格式
var month = d.getMonth() + 1;
return month+'月'+ d.getDate() +'日';
})
.tickPadding([15]) //坐标轴线与文字之间的距离
.tickSize(-height)
.orient("bottom"); //位置