SVG画布
HTML 5 提供两种强有力的“画布”：SVG 和 Canvas。
SVG的特点：
- SVG 绘制的是矢量图，因此对图像进行放大不会失真
- 基于 XML，可以为每个元素添加 JavaScript 事件处理器
- 每个图形均视为对象，更改对象的属性，图形也会改变
- 不适合游戏应用
Canvas特点：
- 绘制的是位图，图像放大后会失真
- 不支持事件处理器
- 能够以 .png 或 .jpg 格式保存图像
- 适合游戏应用
那么，对于数据可视化，SVG的优势就显而易见了，而且D3中很多图形生成器也是只支持SVG的
注意，在 SVG 中，x 轴的正方向是水平向右，y 轴的正方向是垂直向下的。
Step1 添加SVG画布
1 var width = 400; //画布的宽度 2 var height = 400; //画布的高度 3 4 var svg = d3.select("body") //选择文档中的body元素 5 .append("svg") //添加一个svg元素 6 .attr("width", width) //设定宽度 7 .attr("height", height); //设定高度 8 9 //画布周边的空白 10 var padding = {left:30, right:30, top:20, bottom:20};
如此，便可以在画布上作图了
比例尺
利用比例尺的目的主要是将某一区域的值映射到另一区域，其大小关系不变，也就是说，让图形自适应画布的大小。
在数学中，x 的范围被称为定义域，y 的范围被称为值域。D3 中的比例尺，也有定义域和值域，分别被称为 domain 和 range。开发者需要指定 domain 和 range 的范围，如此即可得到一个计算关系。
D3中的比例尺最常用的有两种：
线性比例尺
d3.scale.linear() 返回一个线性比例尺。domain() 和 range() 分别设定比例尺的定义域和值域
1 var dataset = [1.2, 2.3, 0.9, 1.5, 3.3]; 2 3 var min = d3.min(dataset); 4 var max = d3.max(dataset); 5 6 var linear = d3.scale.linear() 7 .domain([min, max]) 8 .range([0, 300]); 9 10 linear(0.9); //返回 0 11 linear(2.3); //返回 175 12 linear(3.3); //返回 300
注意：d3.scale.linear() 的返回值，是可以当做函数来使用的。因此，才有这样的用法：linear(0.9)。
序数比例尺
d3.scale.ordinal() 返回一个线性比例尺。domain() 和 range() 分别设定比例尺的定义域和值域
1 var index = [0, 1, 2, 3, 4]; 2 var color = ["red", "blue", "green", "yellow", "black"]; 3 4 var ordinal = d3.scale.ordinal() 5 .domain(index) 6 .range(color); 7 8 ordinal(0); //返回 red 9 ordinal(2); //返回 green 10 ordinal(4); //返回 black
0 对应颜色 red，1 对应 blue，依次类推
Step2 定义数据和比例尺
1 var dataset=[10, 20, 30, 40, 33, 24, 12, 5]; 2 3 //x轴 4 var xScale=d3.scale.ordinal() 5 .domain(d3.range(dataset.length)) 6 .rangeRoundBands([0,width-padding.left-padding.right]); 7 8 //y轴 9 var yScale=d3.scale.linear() 10 .domain([0,d3.max(dataset)]) 11 .range([height-padding.top-padding.bottom,0]);//y轴正方向向下
ordinal.rangeRoundBands - 用几个离散区间来分割一个连续的区间，区间边界和宽度会取整
坐标轴
D3中用于定义坐标轴的组件：d3.svg.axis()
1 //数据 2 var dataset = [ 2.5 , 2.1 , 1.7 , 1.3 , 0.9 ]; 3 //定义比例尺，其中使用了数组dataset 4 var linear = d3.scale.linear() 5 .domain([0, d3.max(dataset)]) 6 .range([0, 250]); 7 //定义坐标轴，其中使用了线性比例尺linear 8 var axis = d3.svg.axis() 9 .scale(linear) //指定比例尺 10 .orient("bottom") //指定刻度的方向 11 .ticks(7); //指定刻度的数量
追加到画布上：
1 svg.append("g") 2 .attr("class","axis") 3 .attr("transform","translate(20,130)") 4 .call(axis);
注意： svg.append("g").call(axis); 与 axis(svg.append(g)); 是相等的。
为axis设定样式（y也是常用的样式了）
<style> .axis path, .axis line{ fill: none; stroke: black; shape-rendering: crispEdges; } .axis text { font-family: sans-serif; font-size: 11px; } </style>
Step3 定义坐标轴
1 //定义x轴 2 var xAxis = d3.svg.axis() 3 .scale(xScale) 4 .orient("bottom"); 5 6 //定义y轴 7 var yAxis = d3.svg.axis() 8 .scale(yScale) 9 .orient("left");
Step4 添加矩形和文字元素
//矩形之间的空白 var rectPadding = 4; //添加矩形元素 var rects = svg.selectAll(".MyRect") .data(dataset) .enter() .append("rect") .attr("class","MyRect") .attr("transform","translate(" + padding.left + "," + padding.top + ")") .attr("x", function(d,i){ return xScale(i) + rectPadding/2; } ) .attr("y",function(d){ return yScale(d); }) .attr("width", xScale.rangeBand() - rectPadding ) .attr("height", function(d){ return height - padding.top - padding.bottom - yScale(d); })
.attr("fill","steelblue"); //添加文字元素 var texts = svg.selectAll(".MyText") .data(dataset) .enter() .append("text") .attr("class","MyText") .attr("transform","translate(" + padding.left + "," + padding.top + ")") .attr("x", function(d,i){ return xScale(i) + rectPadding/2; } ) .attr("y",function(d){ return yScale(d); }) .attr("dx",function(){ return (xScale.rangeBand() - rectPadding)/2; }) .attr("dy",function(d){ return 20; }) .text(function(d){ return d; });
Step5 添加坐标轴元素
1 //添加x轴 2 svg.append("g") 3 .attr("class","axis") 4 .attr("transform","translate(" + padding.left + "," + (height - padding.bottom) + ")") 5 .call(xAxis); 6 7 //添加y轴 8 svg.append("g") 9 .attr("class","axis") 10 .attr("transform","translate(" + padding.left + "," + padding.top + ")") 11 .call(yAxis);
折线图
1 //定义画布 2 var width=400; 3 var height=400; 4 5 var svg=d3.select("body") 6 .append("svg") 7 .attr("width",width) 8 .attr("height",height); 9 //定义内边距 10 var padding={left:20,right:20,top:10,bottom:10}; 11 12 //数据 13 var dataset=[11,35,23,78,55,18,98,100,22,65] 14 //定义比例尺 15 var xscale=d3.scale.linear() 16 .domain([0,dataset.length-1]) 17 .range([0,width-padding.left-padding.right]) 18 var yscale=d3.scale.linear() 19 .domain([0,d3.max(dataset)]) 20 .range([height-padding.top-padding.bottom,0]) 21 //绘制坐标轴 22 var xAxis=d3.svg.axis() 23 .scale(xscale) 24 .orient("bottom") 25 var yAxis=d3.svg.axis() 26 .scale(yscale) 27 .orient("left") 28 d3.select("svg") 29 .append("g") 30 .attr("transform","translate(" + padding.left + "," + (height - padding.bottom) + ")") 31 .call(xAxis) 32 .attr("class","axis") 33 34 d3.select("svg") 35 .append("g") 36 .attr("transform","translate("+padding.left+","+padding.top+")") 37 .call(yAxis) 38 .attr("class","axis") 39 40 41 //绘制图形 42 var line_generator=d3.svg.line() 43 .x(function(d,i){ 44 return xscale(i)//x轴的点用数据下标表示 45 }) 46 .y(function(d){ 47 return yscale(d) 48 }); 49 //.interpolate("linear") 50 var g=svg.append("g") 51 .attr("transform","translate("+padding.left+","+padding.top+")") 52 53 54 g.append("path") 55 .attr("d",line_generator(dataset)) 56 .attr(‘stroke‘, ‘black‘) 57 .attr(‘stroke-width‘, 1) 58 .attr("fill","none")
