用D3.js制作图表详解

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

D3和JQuery的区别在于D3是数据驱动的，而JQuery不是：我们使用JQuery直接操作元素；但是在使用D3的时候，我们需要通过D3的专有data()，enter()和exit()方法提供数据和回调，然后D3操作元素。D3通常用于数据可视化。JQuery用于创建Web应用程序。D3有很多数据可视化扩展；JQuery有很多Web应用程序插件。两者都是Javascript DOM操作库，提供CSS选择器和流畅的API。

D3和JQuery有什么区别？

最常用的方法

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

D3.selectAll(选择器):与select()不同，所有匹配的元素都被选中。

Selection.append(type):如果指定的类型是字符串，则将此类型(标记名)作为新元素附加到每个选定元素的最后一个子元素。

选择。attr (name，[value]):确定值后，将选择中名为name的属性值设置为value。值可以是常数或方法。如果未给出值，则返回所选内容中第一个非空元素的name属性的当前值。

Selection.data([data[，key]]):绑定数据和元素并返回新的选择。

Selection.enter():返回enter selection。此时，DOM元素比相应的数据少。用于添加缺失的DOM元素。例如：

var div=d3.select('body ')。选择全部(“div”)。数据([4，8，15，16，23，42])。输入()。追加(' div ')。text(函数(d){ return d；});

如果body为空，上面的代码将根据数据创建一个新的div元素，然后将其添加到body元素中，并将文本内容设置为相应的数字。页面结果如下：

div 4/div 8/div div 15/div div 16/div div 23/div div 42/div

Selection.exit():返回退出选择。此时，DOM元素比对应的数据多。用于移除冗余的DOM元素。例如，基于以上示例，我们需要更新数据：

div=div.data([1，2，4，8，16，32]，函数(d){ return d；});

这时，因为key方法(用于指定数据和元素匹配的顺序等。)并且数据[4，8，16]与现有元素匹配，则更新选择仅包含3个div元素。我们可以使用输入选择来添加3个新元素：

div.enter()。追加(' div ')。text(函数(d){ return d；});

然后，您需要删除不必要的元素[15，23，42]:

div.exit()。移除()；

页面结果：

制作1/2/4/8/16/32/16分区的柱状图

直方图示例

使用D3时，您应该对SVG的结构有所了解。画什么图形，用什么标签，定义什么属性。比如做一个直方图，主要是一个XY坐标轴和一个列。XY轴使用线标签绘制直线，文本标签显示标尺的文本。列使用矩形标签来绘制矩形，所以如果想要圆角矩形，我们可以设置矩形标签的rx或ry属性，如果想要定义矩形的位置，需要设置x和y属性等。就这样，一部分一部分组合成一幅画。

以下内容基于D3 3.x的API，部分接口与D3 4.0不同。D3 3.x API引用3 4.0 API引用

根处的Svg

D3绘图应该首先创建一个svg元素，并定义宽度和高度的属性：

var svg=d3.select(id)。追加(' svg ')。attr('class '，' svg_timeline ')。attr('width '，width margin.left margin.right)。attr('height '，高度边距.上边距.下边距)；

轴线制作轴线首先需要使用D3标尺。使用方法axis.scale([scale])设置轴的比例或返回当前比例。规模分为：

定量尺度：连续的数据，如数字。时间尺度：数据就是时间。序数标度：离散数据，如名称和类别。

比如我们要做一个有时标的X轴和一个有数字刻度的Y轴，可以用时标和定量刻度，或者更具体一点，线性刻度。

D3.scale.linear():创建一个线性标尺。D3.time.scale():创建一个时间刻度。刻度和刻度格式配置为当地时间。

确定比例尺后，需要设置输入字段和输出范围。例如，x轴的比例为：

Var x=d3.time.scale()。范围([0，坐标轴的宽度])。域名(最短日期，最长日期)；

最小日期和最大日期都是日期对象。然后设置x轴的比例尺并创建它：

//生成x坐标轴var xAxis=d3.svg.axis() //创建新的默认坐标轴。比例(x) //设置比例。刻度(d3.time.day，1) //指定刻度生成方法。tickFormat(函数(d){ //自定义刻度文本格式varmonth=d . get . Return month ' d . getdate()' day '；}) .tickPadding([15]) //坐标轴与字符之间的距离。刻度尺寸(-高度)。定向('底部')；//位置刻度的参数类型取决于相应比例尺的类型。这里传递的参数是时间间隔，这意味着刻度相隔一天。TickFormat允许我们自定义标尺的文本格式。

值得一提的是，如果数据中X轴对应的数据是字符串，比如‘2017-08-12’。需要处理绑定到页面的数据。D3提供了一个解析日期的接口和一个格式化日期的接口。

Format.parse(字符串):将字符串解析为日期。D3.time.format(说明符):根据给定的说明符创建本地时间格式。

例如：

var parse date=d 3 . time . format(' % Y-% m-% d ')。解析；//时间解析器var date=parseDate(' 2017-08-12 ')；//将字符串解析为日期

最后，在svg元素中添加轴：

//添加x轴元素SVG.append ('g ')。attr ('class '，' x轴')。attr ('transform '，' translate (0，' height ')')。call(xaxis)；

选择。call (function [，arguments …])方法调用指定的方法一次，并将选择连同参数一起传递给方法。

直方图中的矩形具体步骤：将数据与页面元素绑定，创建所需的页面元素，具体设置每个页面元素的样式位置，监控事件。

//添加bar元素varbars=SVG。selectall('。巴雷特')。数据(ddata)//绑定数据。输入()。追加(' g') //创建缺少的页面元素。attr ('class '，' barrect ')。attr ('id '，});//定义矩形的位置//x是矩形最左边的位置//y是矩形条最上面的位置。追加(' rect ')。attr ('class '，' bar-rect ')。attr ('width '，16)//矩形的宽度。attr ('y '，函数(。//使用比例尺确定坐标y值})。attr ('x '，函数(d){ return x(d . date)-8；//使用比例尺确定坐标x值})。attr ('height '，函数(d){//条的高度返回height-y(d . value)；}) .attr('rx '，10) //圆角。attr('ry '，10) //圆角。attr('填充'，' URL (#线性渐变'))；//填充渐变颜色