html上绘制网格线,【玩转D3.js】--（1）绘制网格线

我们常常使用常规图表(直方图，折线图等)来表现数据。为了清楚的表示数据在数轴上的哪个数值区间，会直接在矩形和点上标注数值。

除了这个办法外，还可以使用色调偏淡的网格作为背景参照。

本文介绍了如何使用D3绘制网格线的小技巧：

绘制效果：

思路很简单：

1 绘制SVG容器。

2 给SVG分组，并设置分组的样式类。

3 为分组分别添加横线和竖线。

关键技术介绍

(1) 生成一个10元素的数组：

(2) 定义x和y比例尺

x = d3.scale.linear().domain([0,1]).range([p, w - p])

x线性比例尺，将数组的值映射为实际的像素值，例如：