使用D3.js制作图表详解

　　

D3是用于数据可视化的Javascript库。使用SVG画布和HTML。结合强大的可视化技术和数据驱动的DOM操作方法。

　　

D3与JQuery的区别D3是数据驱动的,JQuery不是:我们使用JQuery直接操纵元素;但是使用D3
　　时我们需要通过D3专有()的数据,输入()和出口()方法提供数据和回调,然后D3操作元素。D3通常用于数据可视化;JQuery用于创建网络应用.D3有很多数据可视化扩展,JQuery有很多网络应用插件。两者都是Javascript DOM操作库,提供CSS选择器和流畅的API。

　　

之间的区别是什么D3和jquery # 63;

　　

最常用的方法

　　

d3.select(选择):选择第一个匹配选择器的元素。如果没有匹配的元素,返回一个空的选择(但不是null或未定义)。

　　

d3.selectAll(选择):与选择()不同的是,会选择所有匹配的元素。

　　

selection.append(类型):如果指定的类型是一个字符串,则将这个类型(标签名称)作为新元素附加到每个选定元素的最后一个子元素。

　　

选择。attr(名称,(价值)):价值确定时,将选择中名为名字的属性值设置成value.value可以为常量或者方法。如果价值没有给出,返回选择中第一个非空元素的名称属性当前值。

　　

selection.data([[,]]的数据):将数据和元素绑定起来,并返回一个新的选择。

　　

selection.enter():返回输入选择。此DOM时元素少于对应的数据。用于添加缺少的DOM元素,比如:

　　 　　 　　var div=d3.select(“身体”) 　　.selectAll (" div ") 　　. data([4、8、15、16、23日42]) 　　.enter () .append (" div ") 　　d。text(函数(d){返回;}); 　　之前 　　 　　

　　

如果身体是空的,上面的代码就会根据数据创建新的div元素,然后添加到身体元素中,并将文本内容设置为对应的数字。页面结果如下:

　　 　　 　　& lt; div> 4 & lt;/div> 　　& lt; div> 8 & lt;/div> 　　& lt; div> 15 & lt;/div> 　　& lt; div> 16 & lt;/div> 　　& lt; div> 23 & lt;/div> 　　& lt; div> 42 & lt;/div> 　　 　　

　　

selection.exit():返回退出选择。此DOM时元素多于对应的数据。用于移除多余的DOM元素,比如,基于上面的例子,我们要更新数据:

　　

<代码> div=div.data([1、2、4、8、16、32)、功能(d){返回d;});

　　

因为此时指定了关键方法(用于指定数据和元素匹配的顺序等),并且数据(4、8、16)匹配已经存在的元素,所以更新选择只包含3个div元素。我们可以使用输入选择添加3个新元素:

　　

<代码> div.enter () .append (" div ")。text(函数(d){返回d;});

　　

然后,还需要移除不需要的元素[15,23日,42]:

　　

<代码> div.exit () .remove ();

　　

页面结果:

　　 　　 　　& lt; div> 1 & lt;/div> 　　& lt; div> 2 & lt;/div> 　　& lt; div> 4 & lt;/div> 　　& lt; div> 8 & lt;/div> 　　& lt; div> 16 & lt;/div> 　　& lt; div> 32 & lt;/div> 　　 　　

制作柱状图

　　

　　

　　

<>强柱状图示例

　　

使用D3的时候,要对SVG的结构有一个了解。要绘出什么图形,需要用到什么标签,标签需要定义什么属性。
　　比如,制作一个柱状图,主要是XY坐标轴和柱形.XY轴用到线标签绘制直线,以及文本标签显示刻度的文字。柱形用到矩形标签绘制长方形,那如果要带圆角的长方形,我们可以设置矩形标签属的rx或变化性,如果要定义长方形的位置,需要设置x和y属性等。就这样,一部分一部分的组合到一起成为一张图。

　　

以下的内容是基于D3 3。x的API,有些接口跟D3 4.0是不同的。
　　D3 3。x的API参考
　　D3 4.0 API参考

　　

<强>根部的svg
　　

　　

D3绘图首先要创建一个svg元素并定义宽高等属性:

　　 　　 　　svg var=d3.select (id) .append (svg) 　　.attr(“类”、“svg_timeline”) 　　.attr(“宽度”,宽度+利润。左+ margin.right) 　　.attr(“高度”,身高+利润。前+ margin.bottom); 　　之前 　　 　　

　　

坐标轴
　　制作坐标轴首先需要用到D3的比例尺。用到方法axis.scale((规模)),设置坐标轴的比例尺,或者返回当前的比例尺。比例尺分为:

　　

定量比例尺:连续的数据,比如数字。时间比例尺:数据是时间。序数比例尺:离散的数据,比如名称,类别等。

使用D3.js制作图表详解