freeCodeCamp

2.5 KiB

Raw Blame History

id	title	challengeType	videoUrl	localeTitle
587d7fa8367417b2b2512bcd	Create a Bar for Each Data Point in the Set	6		为集合中的每个数据点创建一个条

Description

最后一个挑战只在svg元素中添加了一个矩形来表示一个条形。在这里，您将结合您迄今为止学习的有关data() ， enter()和SVG形状的内容，为数据dataset每个数据点创建和附加一个矩形。之前的挑战显示了如何为dataset每个项目创建和附加div的格式：

d3.select（ “身体”）。全选（ “分区”）
。数据（数据集）
。输入（）
.append（ “分区”）

使用rect元素而不是divs有一些差异。 rects必须附加到svg元素，而不是直接附加到body 。此外，您需要告诉D3在svg区域内放置每个rect位置。酒吧安置将在下一个挑战中涵盖。

Instructions

使用data() ， enter()和append()方法为dataset每个项创建和附加rect 。条形图应该全部显示在一起，这将在下一个挑战中修复。

Tests

tests:
  - text: 您的文档应该有9个<code>rect</code>元素。
    testString: assert($('rect').length == 9);
  - text: 您的代码应该使用<code>data()</code>方法。
    testString: assert(code.match(/\.data/g));
  - text: 您的代码应使用<code>enter()</code>方法。
    testString: assert(code.match(/\.enter/g));
  - text: 您的代码应使用<code>append()</code>方法。
    testString: assert(code.match(/\.append/g));

Challenge Seed

<body>
  <script>
    const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];

    const w = 500;
    const h = 100;

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

    svg.selectAll("rect")
       // Add your code below this line



       // Add your code above this line
       .attr("x", 0)
       .attr("y", 0)
       .attr("width", 25)
       .attr("height", 100);
  </script>
</body>

Solution

// solution required

2.5 KiB Raw Blame History Unescape Escape