版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/zhang__tianxu/article/details/44497785
我们常常使用常规图表（直方图，折线图等）来表现数据。为了清楚的表示数据在数轴上的哪个数值区间，会直接在矩形和点上标注数值。
除了这个办法外，还可以使用色调偏淡的网格作为背景参照。
本文介绍了如何使用D3绘制网格线的小技巧：
绘制效果：
思路很简单：
1 绘制SVG容器。
2 给SVG分组，并设置分组的样式类。
3 为分组分别添加横线和竖线。
关键技术介绍
(1) 生成一个10元素的数组：
(2) 定义x和y比例尺
x = d3.scale.linear().domain([0,1]).range([p, w - p])x线性比例尺，将数组的值映射为实际的像素值，例如：
(3) 绘制SVG
var svg = d3.select("body").append("svg")
.attr("width", w)
.attr("height",h);(4) 给SVG添加分组，并设置样式类
var grid = svg.selectAll(".grid")
.data(x.ticks(10))
.enter().append("g")
.attr("class", "grid");(5) 添加线条
grid.append("line")
.attr("x1", x)
.attr("x2", x)
.attr("y1", p)
.attr("y2", h - p - 1);
…本例很简单，可以使用下面的代码测试效果，你学会了吗？
完整代码：
<!DOCTYPE html>
<html>
<head>
<metacharset="UTF-8" content="">
<title>linegrid</title>
<styletype="text/css">
//分组中线的样式，这里设置了颜色值，实际使用可以更淡，例如stroke: #ccc
.gridline {
stroke: #000;
}
</style>
<scripttype="text/javascript" src="d3.js"></script><!--下载到本地-->
</head>
</head>
<body>
<script type="text/javascript">
var data = d3.range(10);// (1) 生成一个10元素的数组
var w = 960,
h= 500,
p= 40,//内边距
x= d3.scale.linear().domain([0, 1]).range([p, w - p]), //(2) 定义x和y比例尺
y= d3.scale.linear().domain([0, 1]).range([h - p, p]);
//(3) 绘制SVG
var svg = d3.select("body").append("svg")
.attr("width", w)
.attr("height", h);
//(4) 给SVG添加分组，并设置样式类，样式见<style>标签中的设置
var grid = svg.selectAll(".grid")
.data(x.ticks(10))
.enter().append("g")
.attr("class", "grid");
//(5) 添加线条，设置起始坐标(x1,y1)和结束坐标(x2,y2)的值即可
//竖线
grid.append("line")
.attr("x1", x)
.attr("x2", x)
.attr("y1", p)
.attr("y2", h - p - 1);
//横线
grid.append("line")
.attr("y1", y)
.attr("y2", y)
.attr("x1", p)
.attr("x2", w - p + 1);
</script>
</body>
</html>