Gauss Zhou

# Learn About SVG in D3

SVG stands for Scalable Vector Graphics.

Here "scalable" means that, if you zoom in or out on an object, it would not appear pixelated. It scales with the display system, whether it's on a small mobile screen or a large TV monitor.

SVG is used to make common geometric shapes. Since D3 maps data into a visual representation, it uses SVG to create the shapes for the visualization. SVG shapes for a web page must go within an HTML svg tag.

CSS can be scalable when styles use relative units (such as vh, vw, or percentages), but using SVG is more flexible to build data visualizations.

SVG 代表可缩放矢量图形。

这里“可缩放”的意思是，如果你放大或缩小一个对象，它不会出现像素化。 它与显示系统一起缩放，无论是在小的移动屏幕上还是在大的电视显示器上。

SVG 用于制作常见的几何形状。 由于 D3 将数据映射到可视化表示，因此它使用 SVG 来创建可视化的形状。 网页的 SVG 形状必须放在 HTML svg 标签中。

当样式使用相对单位（例如 vh、vw 或百分比）时，CSS 可以扩展，但使用 SVG 可以更灵活地构建数据可视化。

Question

Add an svg node to the body using append(). Give it a width attribute set to the provided w constant and a height attribute set to the provided h constant using the attr() or style() methods for each. You'll see it in the output because there's a background-color of pink applied to it in the style tag.

Note: When using attr() width and height attributes do not have units. This is the building block of scaling - the element will always have a 5:1 width to height ratio, no matter what the zoom level is.

问题

使用 append() 将 svg 节点添加到正文。 分别使用 attr() 或 style() 方法将宽度属性设置为提供的 w 常量，将高度属性设置为提供的 h 常量。 您会在输出中看到它，因为在样式标签中应用了粉红色的背景色。

注意：当使用 attr() 时，宽度和高度属性没有单位。 这是缩放的基石——无论缩放级别如何，元素的宽高比始终为 5:1。

<style>
  svg {
    background-color: pink;
  }
</style>
<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("body")
                  // Add your code below this line
                  .append("svg")
                  .attr("width", w)
                  .attr("height", h)
                  // Add your code above this line
  </script>
</body>