前面说了几节，都是对文字进行处理，这一节中将用 D3.js 做一个简单的柱形图。
做柱形图有很多种方法，比如用 HTML 的 div 标签，或用 svg 。
推荐用 SVG 来做各种图形。SVG 意为可缩放矢量图形（Scalable Vector Graphics），SVG 使用 XML 格式定义图像，不清楚什么是SVG的朋友请先在 w3cschools 学习下，内容很少，很快就能掌握，不需要记住各种标签，只要知道大概是什么就行，用的时候再查。
先看下面的代码：
- <script src=”http://d3js.org/d3.v3.min.js” charset=”utf-8″></script>
- <script>
- var width = 600;
- var height = 600;
- var svg = d3.select(“body”).append(“svg”)
- .attr(“width”,width)
- .attr(“height”,height);
- var dataset = [ 30 , 20 , 45 , 12 , 21 ];
- svg.selectAll(“rect”)
- .data(dataset)
- .enter()
- .append(“rect”)
- .attr(“x”,10)
- .attr(“y”,function(d,i){
- return i * 30;
- })
- .attr(“width”,function(d,i){
- return d * 10;
- })
- .attr(“height”,28)
- .attr(“fill”,”red”);
- </script>
上面代码的结果如下图：
这样就做了一个柱形图。分析一下上面的代码：
第3-4行： 定义两个变量，分别表示 SVG 绘制领域的宽和高。
第5-7行： 表示选择 body 后，在 body 里插入 svg ，用 attr 来给 svg 添加属性。用 attr 添加属性的效果类似于在 HTML 中给<a>元素添加属性 href 。
第9行： 是要使用的数据。
第11行： 表示在 svg 中选择所有的 rect 元素，但是实际上这时候 svg 中还不存在 rect 元素。这是 D3 一个比较特殊的地方，即它能够选择一个空集。先不要惊讶，请看第13行。
第12行： 表示将数据绑定要这个 svg 上。
第13行： enter 表示当所需要的元素（这里为 rect ）比绑定的数据集合的元素（这里为 dataset ）少时，自动添加位置，使得与数据集合的数量一样多。这里很重要。
第14行： 紧接上一行， append 元素 rect 。11-14行经常一起出现，要注意。
第15-27行： 设定 rect 元素的各项属性，如位置，长短，颜色等。
上面的柱形图，对于每个柱柱都是手动设定的长度，实际运用中我们常常希望给定一个最大值，让柱柱自动根据这个最大值调整百分比，显示出来，怎么办呢？插入如下代码：
- var wx = d3.scale.linear()
- .domain([0,d3.max(dataset)])
- .range([0,500]);
d3.scale.linear() 用于生成一个线性的可缩放的尺度，它的初始 domain 为 [ 0 , 1 ] ，初始 range 为 [ 0 , 1 ] ， 这里的[ ]表示的是范围。 现在我们把 domain 设定为 [ 0 , d3.max(dataset) ] ，即0到 dataset 中的最大值。 range设定为0到500。 这表示如果数据是45，则返回500，如果是30，则返回333.333。
接下来只要在添加 rect 时给width属性赋值的时候换成变量 wx 即可。
- svg.selectAll(“rect”)
- .data(dataset)
- .enter()
- .append(“rect”)
- .attr(“x”,10)
- .attr(“y”,function(d,i){
- return i * 30;
- })
- .attr(“width”,wx) //注意这里
- .attr(“height”,28)
- .attr(“fill”,”red”);
这样，宽度会随着绑定的数据自动变化。
来自：
个人博客为： www.ourd3js.com csdn博客为： blog.csdn.net/lzhlzz
转载请注明出处，谢谢。
