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
- 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（包含及） 之间的透明度值。
例如下面的这段代码：
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"); 