开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的16天，点击查看活动详情

了解 D3 中的 SVG

介绍

SVG 是 Scalable Vector Graphics 的缩写。

“scalable” 的意思是如果放大或缩小一个对象，它不会像素化。不管是在小的移动手机屏幕上还是在大的电视显示器上，它都会随着显示系统缩放。

SVG 用于制作常见的几何图形。由于 D3 将数据映射成可视化表达，它用 SVG 来创建可视化的图形。网页上的 SVG 图形必须在 HTML 的 svg 标签中。

当使用相对单位（例如 vh、vw 或者百分比）时，CSS 是可伸缩的。但是在实现数据可视化的时候 SVG 更加的灵活。

实操

用 append() 给 body 加一个 svg 节点。使用 attr() 或 style() 方法给它设置一个 width 属性和一个 height 属性，并分别将它们设置为给定的常量 w 和给定的常量 h。你可以在输出中看见它，因为在 style 标签中它的 background-color 设置为 pink。

注意： width 和 height attr() 没有单位。它们是用来定义缩放的——但无论怎么缩放，元素的宽高比永远是 5:1 。如果你的浏览器没有缩放，那么 svg 的 width 和 px 的关系就是一一对应的。但是在有缩放的环境下，svg 的 width 和 px 的对应关系将发生变化。

所以当我们规定 svg 的 width，height 属性时，只需要根据正常情况下的尺寸规定就行。

文档应该有 1 个 svg 元素。
svg 元素应有一个 width 属性，值为 500，或者在样式中 width 值为 500px。
svg 元素应有一个 height 属性，值为 100，或者在样式中 height 值为 100px。

<style>
  svg {
    background-color: pink;
  }
</style>
<body>
  <script>
    const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];

    const w = 500;
    const h = 100;

    const svg = d3.select("body")
    svg.append("svg")
      .width(w)
      .height(h)
  </script>
</body>