Gauss Zhou

# Create a Bar for Each Data Point in the Set

English

The last challenge added only one rectangle to the svg element to represent a bar. Here, you'll combine what you've learned so far about data(), enter(), and SVG shapes to create and append a rectangle for each data point in dataset.

A previous challenge showed the format for how to create and append a div for each item in dataset:

d3.select("body").selectAll("div")
  .data(dataset)
  .enter()
  .append("div")

There are a few differences working with rect elements instead of div elements. The rect elements must be appended to an svg element, not directly to the body. Also, you need to tell D3 where to place each rect within the svg area. The bar placement will be covered in the next challenge.

TIP

最后一个挑战只向 svg 元素添加了一个矩形来表示一个条形。 在这里，您将结合到目前为止所学的有关 data()、enter() 和 SVG 形状的知识，为数据集中的每个数据点创建和附加一个矩形。

之前的挑战展示了如何为数据集中的每个项目创建和附加一个 div 的格式：

d3.select("body").selectAll("div")
  .data(dataset)
  .enter()
  .append("div")

使用 rect 元素而不是 div 元素有一些不同。 rect 元素必须附加到 svg 元素，而不是直接附加到 body。 此外，您需要告诉 D3 将每个矩形放置在 svg 区域内的什么位置。 下一个挑战将涵盖酒吧的放置。

English

Use the data(), enter(), and append() methods to create and append a rect for each item in dataset. The bars should display all on top of each other; this will be fixed in the next challenge.

TIP

使用 data()、enter() 和 append() 方法为数据集中的每个项目创建和追加一个矩形。 条形图应相互重叠显示； 这将在下一个挑战中得到解决。

<body>
  <div id="d3-container"><div>
  <script>
    const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];

    const w = 500;
    const h = 100;

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

    svg.selectAll("rect")
       // Add your code below this line
       .data(dataset)
       .enter()
       .append("rect")
       // Add your code above this line
       .attr("x", (d, i) => i * 30)
       .attr("y", d => d)
       .attr("width", 25)
       .attr("height", 100);
  </script>
</body>