SVG画布
HTML 5 提供两种强有力的“画布”&＃xff1a;SVG 和 Canvas。
SVG的特点&＃xff1a;
- SVG 绘制的是矢量图&＃xff0c;因此对图像进行放大不会失真
- 基于 XML&＃xff0c;可以为每个元素添加 Javascript 事件处理器
- 每个图形均视为对象&＃xff0c;更改对象的属性&＃xff0c;图形也会改变
- 不适合游戏应用
Canvas特点&＃xff1a;
- 绘制的是位图&＃xff0c;图像放大后会失真
- 不支持事件处理器
- 能够以 .png 或 .jpg 格式保存图像
- 适合游戏应用
那么&＃xff0c;对于数据可视化&＃xff0c;SVG的优势就显而易见了&＃xff0c;而且D3中很多图形生成器也是只支持SVG的
注意&＃xff0c;在 SVG 中&＃xff0c;x 轴的正方向是水平向右&＃xff0c;y 轴的正方向是垂直向下的。
Step1 添加SVG画布
1 var width &＃61; 400; //画布的宽度
2 var height &＃61; 400; //画布的高度
3
4 var svg &＃61; d3.select("body") //选择文档中的body元素
5 .append("svg") //添加一个svg元素
6 .attr("width", width) //设定宽度
7 .attr("height", height); //设定高度
8
9 //画布周边的空白
10 var padding &＃61; {left:30, right:30, top:20, bottom:20};
如此&＃xff0c;便可以在画布上作图了
比例尺
利用比例尺的目的主要是将某一区域的值映射到另一区域&＃xff0c;其大小关系不变&＃xff0c;也就是说&＃xff0c;让图形自适应画布的大小。
在数学中&＃xff0c;x 的范围被称为定义域&＃xff0c;y 的范围被称为值域。D3 中的比例尺&＃xff0c;也有定义域和值域&＃xff0c;分别被称为 domain 和 range。开发者需要指定 domain 和 range 的范围&＃xff0c;如此即可得到一个计算关系。
D3中的比例尺最常用的有两种&＃xff1a;
线性比例尺
d3.scale.linear() 返回一个线性比例尺。domain() 和 range() 分别设定比例尺的定义域和值域
1 var dataset &＃61; [1.2, 2.3, 0.9, 1.5, 3.3];
2
3 var min &＃61; d3.min(dataset);
4 var max &＃61; d3.max(dataset);
5
6 var linear &＃61; 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
注意&＃xff1a;d3.scale.linear() 的返回值&＃xff0c;是可以当做函数来使用的。因此&＃xff0c;才有这样的用法&＃xff1a;linear(0.9)。
序数比例尺
d3.scale.ordinal() 返回一个线性比例尺。domain() 和 range() 分别设定比例尺的定义域和值域
1 var index &＃61; [0, 1, 2, 3, 4];
2 var color &＃61; ["red", "blue", "green", "yellow", "black"];
3
4 var ordinal &＃61; d3.scale.ordinal()
5 .domain(index)
6 .range(color);
7
8 ordinal(0); //返回 red
9 ordinal(2); //返回 green
10 ordinal(4); //返回 black
0 对应颜色 red&＃xff0c;1 对应 blue&＃xff0c;依次类推
Step2 定义数据和比例尺
1 var dataset&＃61;[10, 20, 30, 40, 33, 24, 12, 5];
2
3 //x轴
4 var xScale&＃61;d3.scale.ordinal()
5 .domain(d3.range(dataset.length))
6 .rangeRoundBands([0,width-padding.left-padding.right]);
7
8 //y轴
9 var yScale&＃61;d3.scale.linear()
10 .domain([0,d3.max(dataset)])
11 .range([height-padding.top-padding.bottom,0]);//y轴正方向向下
ordinal.rangeRoundBands - 用几个离散区间来分割一个连续的区间&＃xff0c;区间边界和宽度会取整
坐标轴
D3中用于定义坐标轴的组件&＃xff1a;d3.svg.axis()
1 //数据
2 var dataset &＃61; [ 2.5 , 2.1 , 1.7 , 1.3 , 0.9 ];
3 //定义比例尺&＃xff0c;其中使用了数组dataset
4 var linear &＃61; d3.scale.linear()
5 .domain([0, d3.max(dataset)])
6 .range([0, 250]);
7 //定义坐标轴&＃xff0c;其中使用了线性比例尺linear
8 var axis &＃61; d3.svg.axis()
9 .scale(linear) //指定比例尺
10 .orient("bottom") //指定刻度的方向
11 .ticks(7); //指定刻度的数量
追加到画布上&＃xff1a;
1 svg.append("g")
2 .attr("class","axis")
3 .attr("transform","translate(20,130)")
4 .call(axis);
注意&＃xff1a; svg.append("g").call(axis); 与 axis(svg.append(g)); 是相等的。
为axis设定样式&＃xff08;y也是常用的样式了&＃xff09;
Step3 定义坐标轴
1 //定义x轴
2 var xAxis &＃61; d3.svg.axis()
3 .scale(xScale)
4 .orient("bottom");
5
6 //定义y轴
7 var yAxis &＃61; d3.svg.axis()
8 .scale(yScale)
9 .orient("left");
Step4 添加矩形和文字元素
//矩形之间的空白
var rectPadding &＃61; 4;//添加矩形元素
var rects &＃61; svg.selectAll(".MyRect").data(dataset).enter().append("rect").attr("class","MyRect").attr("transform","translate(" &＃43; padding.left &＃43; "," &＃43; padding.top &＃43; ")").attr("x", function(d,i){return xScale(i) &＃43; 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 &＃61; svg.selectAll(".MyText").data(dataset).enter().append("text").attr("class","MyText").attr("transform","translate(" &＃43; padding.left &＃43; "," &＃43; padding.top &＃43; ")").attr("x", function(d,i){return xScale(i) &＃43; 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(" &＃43; padding.left &＃43; "," &＃43; (height - padding.bottom) &＃43; ")")
5 .call(xAxis);
6
7 //添加y轴
8 svg.append("g")
9 .attr("class","axis")
10 .attr("transform","translate(" &＃43; padding.left &＃43; "," &＃43; padding.top &＃43; ")")
11 .call(yAxis);
折线图
1 //定义画布
2 var width&＃61;400;
3 var height&＃61;400;
4
5 var svg&＃61;d3.select("body")
6 .append("svg")
7 .attr("width",width)
8 .attr("height",height);
9 //定义内边距
10 var padding&＃61;{left:20,right:20,top:10,bottom:10};
11
12 //数据
13 var dataset&＃61;[11,35,23,78,55,18,98,100,22,65]
14 //定义比例尺
15 var xscale&＃61;d3.scale.linear()
16 .domain([0,dataset.length-1])
17 .range([0,width-padding.left-padding.right])
18 var yscale&＃61;d3.scale.linear()
19 .domain([0,d3.max(dataset)])
20 .range([height-padding.top-padding.bottom,0])
21 //绘制坐标轴
22 var xAxis&＃61;d3.svg.axis()
23 .scale(xscale)
24 .orient("bottom")
25 var yAxis&＃61;d3.svg.axis()
26 .scale(yscale)
27 .orient("left")
28 d3.select("svg")
29 .append("g")
30 .attr("transform","translate(" &＃43; padding.left &＃43; "," &＃43; (height - padding.bottom) &＃43; ")")
31 .call(xAxis)
32 .attr("class","axis")
33
34 d3.select("svg")
35 .append("g")
36 .attr("transform","translate("&＃43;padding.left&＃43;","&＃43;padding.top&＃43;")")
37 .call(yAxis)
38 .attr("class","axis")
39
40
41 //绘制图形
42 var line_generator&＃61;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&＃61;svg.append("g")
51 .attr("transform","translate("&＃43;padding.left&＃43;","&＃43;padding.top&＃43;")")
52
53
54 g.append("path")
55 .attr("d",line_generator(dataset))
56 .attr(&＃39;stroke&＃39;, &＃39;black&＃39;)
57 .attr(&＃39;stroke-width&＃39;, 1)
58 .attr("fill","none")
散点图
关键代码如下&＃xff1a;
var circle&＃61;svg.selectAll("circle").data(dataset).enter().append("circle").attr("fill","black").attr("r",3).attr("cx",function(d){return padding.left&＃43;xscale(d[0])}).attr("cy",function(d){return padding.top&＃43;yscale(d[1]) //重要&＃xff01;&＃xff01;})
上面标红的地方说明以下&＃xff0c;本来想着y轴向下&＃xff0c;便写成了 height-padding.bottom-yscale(d[1])
但是发现画出的点的位置并不正确&＃xff0c;原来原因是上面定义比例尺时&＃xff0c;将值域已经设置成了 [height-2*padding.top,0] &＃xff0c;可以说&＃xff0c;此时的坐标轴方向已经反转&＃xff0c;所以此时的计算只需加上 padding.top 即可
其实&＃xff0c;更不易出错的方法是&＃xff0c;将点放在一个group内&＃xff0c;那么cx, cy只需按比例计算&＃xff0c;然后在将group做一个transform变换即可。如上面画折线图的方法。
文本的换行
最后讲一下文本的换行
方法1&＃xff1a;利用tspan标签
var str &＃61; "云中谁寄锦书来&＃xff0c;雁字回时&＃xff0c;月满西楼"; var text &＃61; svg.append("text").attr("x",30).attr("y",100).attr("font-size",30).attr("font-family","simsun");
//将字符串分段
var strs &＃61; str.split("&＃xff0c;") ;text.selectAll("tspan").data(strs).enter().append("tspan").attr("x",text.attr("x")) //文本从x&＃61;?处开始.attr("dy","1em") //文本较y轴的相对位移&＃xff0c;此处也就意味着换行.text(function(d){return d;});
方法2&＃xff1a;引用库 http://www.ourd3js.com/library/multext.js&＃xff0c;其实质仍旧是tspan&＃xff0c;只是进行了封装罢了
文件里只实现了一个函数 appendMultiText()&＃xff0c;其各参数的意义为&＃xff1a;
appendMultiText(container, //文本的容器&＃xff0c;可以是str, //字符串posX, //文本的x坐标posY, //文本的y坐标width, //每一行的宽度&＃xff0c;单位为像素fontsize, //文字的大小&＃xff08;可省略&＃xff09;&＃xff0c;默认为 14fontfamily //文字的字体&＃xff08;可省略&＃xff09;&＃xff0c;默认为 simsun, arial
)
小实例&＃xff1a;
var str &＃61; "青青子衿&＃xff0c;悠悠我心&＃xff0c;但为君故&＃xff0c;沉吟至今。"; var multext &＃61; appendMultiText(svg,str,30,100,120,20,"simsun");multext.attr("transform","rotate(-20)");
京公网安备 11010802041100号