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元素。比如：
我要评论
var div = d3.select("body")
.selectall("div")
.data([4, 8, 15, 16, 23, 42])
.enter().append("div")
.text(function(d) { return d; });
如果body是空的，上面的代码就会根据数据创建新的div元素，然后添加到body元素中，并将文本内容设置为对应的数字。页面结果如下：
<div>4</div> <div>8</div> <div>15</div> <div>16</div> <div>23</div> <div>42</div>
selection.exit()：返回exit selection。此时dom元素多于对应的数据。用于移除多余的dom元素。比如，基于上面的例子，我们要更新数据：
div = div.data([1, 2, 4, 8, 16, 32], function(d) { return d; });
因为此时指定了key方法（用于指定数据和元素匹配的顺序等），并且数据[4,8,16]匹配已经存在的元素，所以update selection只包含3个div元素。我们可以使用enter selection添加3个新元素：
div.enter().append("div").text(function(d) { return d; });
然后，还需要移除不需要的元素[15, 23, 42]：
div.exit().remove();
页面结果：
<div>1</div> <div>2</div> <div>4</div> <div>8</div> <div>16</div> <div>32</div>
制作柱状图
柱状图示例
使用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绘图首先要创建一个svg元素并定义宽高等属性：
var svg = d3.select(id).append("svg")
.attr('class', 'svg_timeline')
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom);
坐标轴
制作坐标轴首先需要用到d3的比例尺。用到方法 axis.scale([scale]) ，设置坐标轴的比例尺，或者返回当前的比例尺。比例尺分为：
定量比例尺：连续的数据，比如数字。时间比例尺：数据是时间。序数比例尺：离散的数据，比如名称，类别等。
比如我们要制作一个有时间刻度的x轴和一个数字刻度的y轴，就可以使用时间比例尺和定量比例尺，或者更具体的说，线性比例尺。
d3.scale.linear()：创建一个线性比例尺。 d3.time.scale()：创建一个时间比例尺。刻度和刻度格式配置为本地时间。
确定比例尺之后还需要设置输入域和输出范围。比如一个x轴的比例尺为：
var x = d3.time.scale() .range([0, 坐标轴的宽度]) .domain(最小日期, 最大日期);
最小日期和最大日期都是date对象。然后设置x坐标轴的比例尺并创建它：
//生成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"); //位置
ticks的参数类型取决于对应的比例尺的类型，这里传的参数是时间间隔，也就是说刻度与刻度之间是相隔一天的。
tickformat则让我们可以自定义刻度的文字格式。
值得一说的是，如果数据中对应x轴的数据是字符串，比如‘2017-08-12'。那绑定到页面上的数据是需要被处理的。d3提供解析日期的接口以及日期格式化的接口。
format.parse(string)：把一个字符串string解析为一个日期。 d3.time.format(specifier)：根据给定的specifier创建一个当地时间格式化。
比如：
var parsedate = d3.time.format("%y-%m-%d").parse; //时间解析器
var date = parsedate('2017-08-12'); //将字符串解析成日期
最后，在svg元素中添加坐标轴：
//添加x轴元素
svg.append("g")
.attr("class", "axis x")
.attr("transform", "translate(0," + height + ")")
.call(xaxis);
selection.call(function[, arguments…])方法调用指定的方法一次，并把selection跟随参数一起传递到方法中。
柱状图中的长方形
具体步骤：将数据跟页面元素绑定，并创建所需要的页面元素，具体设置每个页面元素的样式位置，以及事件监听等。
//添加条形的元素
var bars = svg.selectall(".barrect")
.data(ddata) //绑定数据
.enter().append("g") //创建缺少的页面元素
.attr('class', 'barrect')
.attr("id", function(d, i) {
return "barrect-" + i;
});
//定义矩形的位置
//x为矩形最左端的位置
//y为矩形最顶端的位置
bars.append("rect")
.attr('class','bar-rect')
.attr("width",16) //长方形的宽度
.attr("y", function(d) {
return y(d.value); //使用比例尺确定坐标y值
})
.attr("x", function(d) {
return x(d.date) - 8; //使用比例尺确定坐标x值
})
.attr("height", function(d) { //条形的高度
return height - y(d.value);
})
.attr('rx',10) //圆角
.attr('ry',10) //圆角
.attr('fill','url(#linear-gradient)'); //填充渐变色
如对本文有疑问， 点击进行留言回复！！
vue脚手架安装以及vue脚手架创建项目（详细步骤），看这篇文章就行了，小白也能创建自己的项目
JavaScript递归函数详解：如何使用递归及简单的递归案例
JavaScript 中的break、continue、return的用法和区别
网友评论