用 d3.js 实现基于 SVG 的柱状图

In 未分类 on 2014年02月28日 by TAT.云中飞扬 view: 13,249

之前用 6 步实现了基于 SVG 的折线图，这一篇文章将回到比折线图更基本的图表——柱状图。

本篇直接从创建 SVG 讲起，引入 d3 等简单的准备工作参见用 d3.js 实现基于 SVG 的线形图。

step1：模拟数据

// 模拟100条0-100的随机数，作为柱状图的高度

var data = Array.apply(0, Array(100)).map(function() {

return Math.random() * 100;

});

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 就是最终建立的容器，下面就往容器里面放元素。

// 计算每根柱状物体的宽度

var