之前用 6 步实现了基于 SVG 的折线图，这一篇文章将回到比折线图更基本的图表——柱状图。
本篇直接从创建 SVG 讲起，引入 d3 等简单的准备工作参见用 d3.js 实现基于 SVG 的线形图。
step1：模拟数据
|
1 2 3 4 5 |
// 模拟100条0-100的随机数，作为柱状图的高度 var data = Array.apply(0, Array(100)).map(function() { return Math.random() * 100; }); <!--more--> |
step2：创建 SVG 容器
|
1 2 3 4 5 6 7 8 9 10 |
var margin = {top: 20, right: 20, bottom: 30, left: 50}, width = document.body.clientWidth - margin.left - margin.right, height = 500 - margin.top - margin.bottom; var chart = d3.select('body') .append('svg') .attr('width', width + margin.left + margin.right) .attr('height', height + margin.top + margin.bottom) .append('g') .attr('transform', 'translate(' + margin.left + ', ' + margin.top + ')'); |
这里的代码就不解释了，前一篇文章已经详细说明。chart 就是最终建立的容器，下面就往容器里面放元素。
step3：画柱状图
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
// 计算每根柱状物体的宽度 var barWidth = width / data.length; // 用g作每根柱状物体的容器，意义可类比div // 前一篇文章已经介绍过selectAll的意义，即生成占位符，等待填充svg图形 var bar = chart.selectAll('g') .data(data) .enter() .append('g') // 接收一个数据填充一个g元素 // 同时为g设置位置 .attr('transform', function(d, i) { return 'translate(' + i * barWidth + ', 0)'; }); bar.append('rect') // 添加一个矩形 .attr('y', function(d) { return height - d; }) .attr('height', function(d) { return d; }) .attr('width', barWidth - 1); |
前文提到 svg 的元素定位都是基于整个 svg 容器左上角作为原点，但并不能使用 position: absolute 等方法定位，此处的 g 元素通过位移来定位 x 坐标，即 transform: translate(x, 0)。
这里的 bar 可类比 jQuery 对象，是一个类数组对象，bar 调用的方法都会对 bar 里面每个对象进行调用。代码中每一次调用都插入一个矩形，同时设置 y 坐标、高度和宽度，x 坐标跟父容器（g）保持一致即可。这里需要注意 y 坐标往下为正，为了让所有矩形的下边处于同一高度，这里设置每个矩形的 y 坐标为容器高度减去矩形高度。为了用一像素区分开每个矩形，这里设置矩形宽度为父容器的宽度减 1。
通过以上 js 代码再稍微设置一点 css
|
1 2 3 |
rect { fill: #2177BB; } |
即可看到一张最简单的柱状图了。
step4：添加坐标轴
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
var y = d3.scale.linear() .domain([0, d3.max(data)]) .range([height, 0]); var xAxis = d3.svg.axis() .scale(x) .orient('bottom') .ticks(1); var yAxis = d3.svg.axis() .scale(y) .orient('left'); // 添加x坐标轴 chart.append('g') .attr('class', 'x axis') .attr('transform', 'translate(0,' + height + ')') .call(xAxis); // 添加y坐标轴 chart.append('g') .attr('class', 'y axis') .call(yAxis); |
完整的柱状图就是这样了
完整的代码请移步 jsFiddle
由于篇幅关系，本篇文章就暂时只介绍最基本的柱状图是怎么完成的，后续会更新动态柱状图以及为柱状图添加交互系效果的实现方法，敬请期待！
shaosh 2014 年 11 月 11 日
另外还有一个问题。
由于原点在图的左上角，本来应该是 y 大的点在图上的位置靠下，y 小的点在图上的位置靠上。
把 range 的范围设为 [height,0] 之后，应该是颠倒过来，y 小的点在图上的位置靠下，y 大的点在图上的位置靠上，这时候为什么还要用 height 减去 d 作为 y 呢？y 应该等于 d 才对啊。
shaosh 2014 年 11 月 11 日
大神，我想问一下，range([height, 0]) 和 range([0, height]) 最后产生的图像为什么没有区别呢？
leeon 2014 年 3 月 17 日
原来 J 大神在 AlloyTeam:-)
hit9 2014 年 4 月 2 日
好巧啊
leeon 2014 年 4 月 2 日
哈哈，作者是本科时的同学，现在在腾讯