坐标轴在很多图表中都可以见到，例如柱形图，折线图、散点图等。坐标轴由由一组线段和文字组成。如果使用svg的直线和文字一笔一画的绘制坐标轴，工作量很大。D3提供了坐标轴的绘制方法，需要配合前面所说的比例尺一起使用。我们仅仅需要几行代码，就能生成各式各样的坐标轴。

定义坐标轴

• d3.axisTop - 创建一个上部轴生成器。
• d3.axisRight - 创建一个右部轴生成器。
• d3.axisBottom - 创建一个底部轴生成器。
• d3.axisLeft - 创建一个左部轴生成器。

1
2
3

// 创建线性比例尺
x = d3.scaleLinear().domian([200, 300]).range([100, 0]);
var axis = d3.axisBottom(x);

示例代码

SVG中添加坐标轴

定义了坐标轴之后，只需要在 SVG 中添加一个分组元素 ，再将坐标轴的其他元素添加到这个 里即可。代码如下：

1
2
3
4
5

svg.append("g")
   .call(axis);
// 或者
var gAxis = svg.append("g");
axis(gAxis);

上面两种方法都是对的，第一个是坐标轴调用选择集，这里的call方法是D3自定义的，含义就是将选择集作为参数传递到函数中。第二种方法是将选择集作为参数执行坐标轴函数。
通常我们更喜欢使用第二种。
示例代码

设置坐标轴位置和样式

默认的坐标轴样式不太美观，下面提供一个常见的样式：

1
2
3
4
5
6
7
8
9
10
11
12
13

<style>
.axis path,
.axis line{
    fill: none;
    stroke: black;
    shape-rendering: crispEdges;
}
 
.axis text {
    font-family: sans-serif;
    font-size: 11px;
}
</style>

分别定义了类 axis 下的 path、line、text 元素的样式。接下来，只需要将坐标轴的类设定为 axis 即可。
坐标轴的位置，可以通过 transform 属性来设定。
通常在添加元素的时候就一并设定，写成如下形式：

1
2
3
4

svg.append("g")
  .attr("class","axis")
  .attr("transform","translate(20,130)")
  .call(axis);

示例代码

总结

1、坐标轴的生成需要结合比例尺，生成很便捷。
2、坐标轴添加到图表中我们我们一般使用选择集的call()函数。
3、坐标轴的样式我们可以通过包裹分组元素下，并设置CSS样式，同时坐标轴还提供了很多刻度的设置方法函数。