改善散点图的另一种方法是添加x轴和y轴。 D3有两种方法axisLeft()和axisBottom()分别渲染y轴和x轴。（轴是轴的复数形式）。以下是在先前的挑战中基于xScale创建x轴的示例： const xAxis = d3.axisBottom(xScale);下一步是在SVG画布上渲染轴。为此，您可以使用常规SVG组件g元素。 g代表组。与rect ， circle和text ，轴在渲染时只是一条直线。因为它是一个简单的形状，使用g作品。最后一步是应用transform属性将轴定位在SVG画布上的正确位置。否则，该线将沿着SVG画布的边框渲染，并且不可见。 SVG支持不同类型的transforms ，但定位轴需要translate 。当它应用于g元素时，它会按给定的数量上下移动整个组。这是一个例子：

const xAxis = d3.axisBottom（xScale）;

svg.append（ “G”）
.attr（“transform”，“translate（0，”+（h - padding）+“）”）
.CALL（x-轴）;

上面的代码将x轴放在SVG画布的底部。然后它作为参数传递给call()方法。除了translate参数的形式为（x，0）之外，y轴的工作方式是相同的。因为translate是上面attr()方法中的字符串，所以可以使用连接来包含其参数的变量值。

散点图现在具有x轴。使用axisLeft()方法在名为yAxis的变量中创建y轴。然后使用g元素渲染轴。确保使用transform属性将轴转换为右边的填充单元数量，然后降低0个单位。记得call()轴。

```yml tests: - text: 您的代码应使用axisLeft()方法， yScale作为参数传递。 testString: 'assert(code.match(/\.axisLeft$yScale$/g), "Your code should use the axisLeft() method with yScale passed as the argument.");' - text: 'y轴g元素应具有transform属性以将轴平移（60,0）。' testString: 'assert($("g").eq(1).attr("transform").match(/translate$60\s*?,\s*?0$/g), "The y-axis g element should have a transform attribute to translate the axis by (60, 0).");' - text: 您的代码应该调用yAxis 。 testString: 'assert(code.match(/\.call$yAxis$/g), "Your code should call the yAxis.");' ```