设置和配置坐标轴

基础图表

正如在“一个简单的图表”课程中所提到的，我们最初创建的简单图表中，坐标轴没有任何样式或配置更改。这导致字体大小、字体类型、刻度数量以及数值的显示方式均保持默认设置。当我们调整初始图表时：

如果压缩边距或图表尺寸，就会出现坐标轴标签重叠的情况，这显然不适合实际用途：

幸运的是，D3 的坐标轴组件提供了丰富的配置选项，我们可以通过 CSS 样式或 JavaScript 代码轻松进行修改。

修改文本大小

我们首先调整坐标轴的文本大小。D3 默认的字体大小为 10px，字体类型为 sans-serif。
有几种方法可以改变字体大小，以下两种方式都有效。第一种是在绘制单个坐标轴时直接指定字体样式。只需添加如下样式：

1svg.append("g")
2    .style("font", "14px times")
3    .attr("transform", "translate(0," + height + ")") 
4    .call(d3.axisBottom(x));

这将把 x 轴的字体大小增加到 14px，并将其字体类型改为 times。效果如下：

需要注意几点：

首先，字体确实变大了，且看起来是 times 字体，效果良好！

其次，y 轴仍保持默认的 10px sans-serif（这是合理的，因为我们只在 x 轴代码块中添加了样式）。

最后，由于 x 轴的数值较多，字体增大后出现了部分重叠。我们稍后会解决这个问题。

坐标轴样式优化

对 x 轴添加样式已成功实现。在仅需修改页面上单一元素的情况下，这种方式完全可行。但在此场景中，我们希望同时调整 x 轴和 y 轴的字体。虽然可以在 y 轴代码块中重复添加样式，但我们有更好的做法：在代码开头的 <style> ... </style> 区域中定义统一样式，然后将其应用到两个坐标轴。

在文件开头的 <style> ... </style> 部分添加以下内容：

1.axis { font: 14px sans-serif; }

这将为所有带有 axis 类的元素设置 14px sans-serif 字体（我更倾向于使用 sans-serif 而非 times）。接下来，只需让我们的 x 轴和 y 轴代码块使用该类即可：

1  // 添加 X 轴
2  svg.append("g")
3      .attr("class", "axis")
4      .attr("transform", "translate(0," + height + ")") 
5      .call(d3.axisBottom(x));
6    
7  // 添加 Y 轴
8  svg.append("g") 
9      .attr("class", "axis") 
10      .call(d3.axisLeft(y));

有人可能会认为这种方式并未显著减少代码量，但在我的观点中，它提供了一种更优雅的方式来统一管理此类样式。

最终效果如下：