2.4 KiB

Raw Blame History

id	title	challengeType	forumTopicId	dashedName
587d7fa8367417b2b2512bcb	了解 D3 中的 SVG	6	301489	learn-about-svg-in-d3

--description--

SVG 是 Scalable Vector Graphics 的缩写。

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

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

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

--instructions--

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

**注意：**width 和 height attr() 没有单位。它们是用来定义缩放的——但无论怎么缩放，元素的宽高比永远是 5:1 。

--hints--

文档应该有 1 个 svg 元素。

assert($('svg').length == 1);

svg 元素应有一个 width 属性，值为 500，或者在样式中 width 值为 500px。

assert($('svg').attr('width') == '500' || $('svg').css('width') == '500px');

svg 元素应有一个 height 属性，值为 100，或者在样式中 height 值为 100px。

assert($('svg').attr('height') == '100' || $('svg').css('height') == '100px');

--seed--

--seed-contents--

<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")
                  // Add your code below this line



                  // Add your code above this line
  </script>
</body>

--solutions--

<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")
                  .append("svg")
                  .attr("width", w)
                  .attr("height", h)
  </script>
</body>

2.4 KiB Raw Blame History Unescape Escape