---
id: 587d7fad367417b2b2512bdf
title: Add Axes to a Visualization
required:
- src: 'https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js'
challengeType: 6
videoUrl: ''
localeTitle: 将轴添加到可视化
---
## Description
改善散点图的另一种方法是添加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()
方法中的字符串,所以可以使用连接来包含其参数的变量值。
## Instructions
散点图现在具有x轴。使用axisLeft()
方法在名为yAxis
的变量中创建y轴。然后使用g
元素渲染轴。确保使用transform
属性将轴转换为右边的填充单元数量,然后降低0个单位。记得call()
轴。
## Tests
```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
.");'
```
## Challenge Seed
## Solution
```js
// solution required
```