freeCodeCamp/create-a-bar-for-each-data-point-in-the-set.chinese.md at 00446ffb1758af30d51a3dc664c20c43244bcdcb

Files

Kristofer Koishigawa 84e28bd0f0 fix(challenges): update required links for d3 challenges (#34477 )

2019-02-08 09:37:46 +03:00

2.7 KiB

Raw Blame History

id, title, challengeType, videoUrl, localeTitle

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, "Your document should have 9 <code>rect</code> elements.");'
  - text: 您的代码应该使用<code>data()</code>方法。
    testString: 'assert(code.match(/\.data/g), "Your code should use the <code>data()</code> method.");'
  - text: 您的代码应使用<code>enter()</code>方法。
    testString: 'assert(code.match(/\.enter/g), "Your code should use the <code>enter()</code> method.");'
  - text: 您的代码应使用<code>append()</code>方法。
    testString: 'assert(code.match(/\.append/g), "Your code should use the <code>append()</code> method.");'

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.7 KiB Raw Blame History Unescape Escape