Gauss Zhou

# Display Shapes with SVG

English

The last challenge created an svg element with a given width and height, which was visible because it had a background-color applied to it in the style tag. The code made space for the given width and height.

The next step is to create a shape to put in the svg area. There are a number of supported shapes in SVG, such as rectangles and circles. They are used to display data. For example, a rectangle (<rect>) SVG shape could create a bar in a bar chart.

When you place a shape into the svg area, you can specify where it goes with x and y coordinates. The origin point of (0, 0) is in the upper-left corner. Positive values for x push the shape to the right, and positive values for y push the shape down from the origin point.

TIP

最后一个挑战是创建一个具有给定宽度和高度的 svg 元素，它是可见的，因为它在 style 标签中应用了背景色。 代码为给定的宽度和高度留出了空间。

下一步是创建一个形状以放入 svg 区域。 SVG 中有许多受支持的形状，例如矩形和圆形。 它们用于显示数据。 例如，矩形 (<rect>) SVG 形状可以在条形图中创建条形。

当您将形状放入 svg 区域时，您可以使用 x 和 y 坐标指定它的位置。 (0, 0) 的原点在左上角。 x 的正值将形状向右推，y 的正值将形状从原点向下推。

English

To place a shape in the middle of the 500 (width) x 100 (height) svg from last challenge, the x coordinate would be 250 and the y coordinate would be 50.

An SVG rect has four attributes. There are the x and y coordinates for where it is placed in the svg area. It also has a height and width to specify the size.

TIP

要在上次挑战的 500（宽）x 100（高）svg 中间放置一个形状，x 坐标为 250，y 坐标为 50。

SVG 矩形有四个属性。 它在 svg 区域中的位置有 x 和 y 坐标。 它还有一个高度和宽度来指定大小。

<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)
                  // Add your code below this line
                  .append("rect")
                  .attr("width", 25)
                  .attr("height", 100)
                  .attr("x", 0)
                  .attr("y", 0)
                  // Add your code above this line
  </script>
</body>