d3.js入门
d3入门
D3是一个强大的数据可视化工具，它是基于Javascript库的，用于创建数据可视化图形。在生成可视化图形的过程中，需要以下几步：
- 把数据加载到浏览器的内存空间；
- 把数据绑定到文档中(这里的文档指的是html文档)的元素,根据需要创建新元素；
- 解析每个元素范围内的数据并为其设置相应的可视化属性，实现元素的变换(transforming);
- 响应用户输入实现元素状态的过渡(transitioning);
SVG
D3最适合用来生成和操作SVG(Scalable Vector Graphics,可伸缩矢量图形)。SVG是一种文本格式，每个SVG都是使用类似于html标记来定义的。在SVG标签中可以嵌入很多可见的元素，包括rect(矩形)、circle(圆形)、ellipse(椭圆形)、line(直线)、text(文本)和path()。下面是简单的定义SVG以及各种嵌入其中的图形。
- SVG
<svg width="500" height="50"></svg>
在这里像素是默认的计量单位，不必加上"px"。
- rect
rect用于绘制矩形。x和y用于指定矩形左上角的坐标(基于像素的坐标系统的原点通常位于画布的左上角)，而width和height用于指定其宽和高。
<rect x="0" y="0" width="500" height="50"/>
- circle
circle用于绘制圆形。cx和cy用于指定圆心坐标，而r用于指定半径。
<circle cx="250" cy="25" r="25"/>
ellipse与circle 类似，只不过每个轴要分别指定半径。因此，半径属性不再是r，而是rx和ry。
<ellipsecx="250" cy="25" rx="100" ry="25"/>
- line
line用于绘制直线。x1和y1用于指定起点坐标，x2和y2用于指定终点坐标。另外，必须用stroke指定直线的颜色才能看得见。
<linex1="0" y1="0" x2="500" y2="50" stroke="black"/>
- text
text用于绘制文本。x用于指定文本左上角的位置，y用于指定字体的基线位置。<text x="250" y="25">Easy-peasy</text>
- path
path用于绘制前面图形之外的其他复杂图形（如地图上的国境线）。
1.3 svg元素的样式
常见的svg属性有下面这些。
fill
图形填充的颜色值
stroke
图形轮廓的颜色值
stroke-width
图形轮廓的宽度
opacity
0.0(完全透明)到1.0(完全不透明)之间的数值
对于文本d3还可以使用font-famliy和font-size这两个属性。
svg中没有"层"和深度的概念，如果多个图形重叠，那么就会出现遮盖的情况。可以在为fill或stroke属性指定颜色的时候使用rgba()。rgba()接受0到255
（包含及）之间的三个值，分别代表红、绿、蓝，还接受第四个0.0到1.0（包含及） 之间的透明度值。
例如下面的这段代码：
<rect x="0" y="0" width="30" height="30" fill="purple"/>
<rect x="20" y="5" width="30" height="30" fill="blue"/>
<rect x="40" y="10" width="30" height="30" fill="green"/>
<rect x="60" y="15" width="30" height="30" fill="yellow"/>
<rect x="80" y="20" width="30" height="30" fill="red"/>
d3.j3语法
基本语法
d3对DOM元素的选择类似于JQuery,如下：
d3.select("body").append("p").text("New paragraph!");
记住一点：在连缀方法时，次序很重要。每个方法的输出必须与下一个方法 期待的输入匹配。如果相邻的输出和输入不匹配，那么结果就像在接力赛跑中把接力棒扔到地上一样。
将数据绑定到DOM元素上，绑定的意思就是把数据“附加”或关联到特定的元素。
var dataset = [ 5, 10, 15, 20, 25 ];
d3.select("body").selectAll("p")
.data(dataset)
.enter()
.append("p")
.text("New paragraph!");
- 选择DOM中的body元素，把它交给连缀方法中的下一个方法。
- 选择DOM中的所有段落。因为还没有段落，所以返回空元素。可以认为这个空 元素代表马上就会创建的段落。
- 解析并数出数据值。dataset数组中有5个值，因而此后的所有方法都将执行五 遍，每次针对一个值。
- 要创建新的绑定数据的元素，必须使用enter()。这个方法会分析当前选择的 DOM元素和传给它的数据，如果数据值比对应的DOM元素多，就创建一个新的占位元素。然后把这个新占位元素的引用交给链中的下一个方法。
- 取得由enter()创建的空占位元素，并把一个p元素追加到相应的DOM中。然后它再把自己刚创建的元素交给链中的下一个方法。
- 取得新创建的p元素，插入文本值。
一个简单的矩形绘制
//svg元素的宽和高
var w = 500;
var h = 100;
//不同div元素之间的间隔
var barPadding = 1; var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13,
11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ]; //创建svg元素，制定svg元素的宽和高
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
//创建矩形
svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("x", function(d, i) {
//返回每个矩形的x坐标轴，从左到右
return i * (w / dataset.length);
})
.attr("y", function(d) {
//返回每个矩形的Y坐标轴，从上到下
return h - (d * 4);
})
//每个矩形的宽度，减去barPadding，是为了元素之间存在间隔
.attr("width", w / dataset.length - barPadding)
//每个矩形的高度
.attr("height", function(d) {
return d * 4;
})
//为每个矩形填充颜色
.attr("fill", function(d) {
return "rgb(0, 0, " + (d * 10) + ")";
});
//为每个矩形添加标记
svg.selectAll("text")
.data(dataset)
.enter()
.append("text")
.text(function(d) {
return d;
})
.attr("text-anchor", "middle")
//这里文本选择在矩形的*偏下方
.attr("x", function(d, i) {
return i * (w / dataset.length) + (w / dataset.length - barPadding) / 2;
})
.attr("y", function(d) {
return h - (d * 4) + 14;
})
//为文本添加css
.attr("font-family", "sans-serif")
.attr("font-size", "11px")
.attr("fill", "white");
创建散点图
//Width and height
var w = 500;
var h = 100;
//主数组表示每个数据“点”元素，每个子数组包含x坐标和y坐标
var dataset = [
[5, 20], [480, 90], [250, 50], [100, 33], [330, 95],
[410, 12], [475, 44], [25, 67], [85, 21], [220, 88]
]; //Create SVG element
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
svg.selectAll("circle")
.data(dataset)
.enter()
.append("circle")
.attr("cx", function(d) {
return d[0];
})
.attr("cy", function(d) {
return d[1];
})
.attr("r", function(d) {
return Math.sqrt(h - d[1]);
});
//这里是绘制标签
svg.selectAll("text")
.data(dataset)
.enter()
.append("text")
.text(function(d) {
return d[0] + "," + d[1];
})
.attr("x", function(d) {
return d[0];
})
.attr("y", function(d) {
return d[1];
})
.attr("font-family", "sans-serif")
.attr("font-size", "11px")
.attr("fill", "red");