freeCodeCamp

4.4 KiB

Raw Blame History

id	title	challengeType	videoUrl	localeTitle
587d7fad367417b2b2512bdf	Add Axes to a Visualization	6		将轴添加到可视化

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

tests:
  - text: 您的代码应使用<code>axisLeft()</code>方法， <code>yScale</code>作为参数传递。
    testString: assert(code.match(/\.axisLeft\(yScale\)/g));
  - text: 'y轴<code>g</code>元素应具有<code>transform</code>属性以将轴平移（60,0）。'
    testString: assert($('g').eq(10).attr('transform').match(/translate\(60\s*?,\s*?0\)/g));
  - text: 您的代码应该调用<code>yAxis</code> 。
    testString: assert(code.match(/\.call\(\s*yAxis\s*\)/g));

Challenge Seed

<body>
  <script>
    const dataset = [
                  [ 34,     78 ],
                  [ 109,   280 ],
                  [ 310,   120 ],
                  [ 79,   411 ],
                  [ 420,   220 ],
                  [ 233,   145 ],
                  [ 333,   96 ],
                  [ 222,    333 ],
                  [ 78,    320 ],
                  [ 21,   123 ]
                ];

    const w = 500;
    const h = 500;
    const padding = 60;

    const xScale = d3.scaleLinear()
                     .domain([0, d3.max(dataset, (d) => d[0])])
                     .range([padding, w - padding]);

    const yScale = d3.scaleLinear()
                     .domain([0, d3.max(dataset, (d) => d[1])])
                     .range([h - padding, padding]);

    const svg = d3.select("body")
                  .append("svg")
                  .attr("width", w)
                  .attr("height", h);

    svg.selectAll("circle")
       .data(dataset)
       .enter()
       .append("circle")
       .attr("cx", (d) => xScale(d[0]))
       .attr("cy",(d) => yScale(d[1]))
       .attr("r", (d) => 5);

    svg.selectAll("text")
       .data(dataset)
       .enter()
       .append("text")
       .text((d) =>  (d[0] + "," + d[1]))
       .attr("x", (d) => xScale(d[0] + 10))
       .attr("y", (d) => yScale(d[1]))

    const xAxis = d3.axisBottom(xScale);
    // Add your code below this line
    const yAxis = undefined;
    // Add your code above this line

    svg.append("g")
       .attr("transform", "translate(0," + (h - padding) + ")")
       .call(xAxis);

    // Add your code below this line



    // Add your code above this line

  </script>
</body>

Solution

// solution required

4.4 KiB Raw Blame History Unescape Escape