2.6 KiB
2.6 KiB
id | title | required | challengeType | videoUrl | localeTitle | |||
---|---|---|---|---|---|---|---|---|
587d7fa8367417b2b2512bcb | Learn About SVG in D3 |
|
6 | 在D3中了解SVG |
Description
Scalable Vector Graphics
。这里的“可缩放”意味着,如果放大或缩小对象,它就不会出现像素化。它可以与显示系统一起扩展,无论是在小型移动屏幕还是大型电视监视器上。 SVG用于制作常见的几何形状。由于D3将数据映射到可视化表示,因此它使用SVG为可视化创建形状。网页的SVG形状必须位于HTML svg
标记内。当样式使用相对单位(例如vh
, vw
或百分比)时,CSS可以是可伸缩的,但使用SVG可以更灵活地构建数据可视化。 Instructions
append()
svg
节点添加到body
。给它一个width
属性设置为所提供的w
常数和height
设置为所提供的属性h
使用恒定attr()
为每个方法。您将在输出中看到它,因为在style
标记中应用了粉红色的background-color
。 注意 宽度和高度属性没有单位。这是缩放的构建块 - 无论缩放级别如何,元素的宽高比始终为5:1。
Tests
tests:
- text: 您的文档应该有1个<code>svg</code>元素。
testString: 'assert($("svg").length == 1, "Your document should have 1 <code>svg</code> element.");'
- text: <code>svg</code>元素的<code>width</code>属性应设置为500。
testString: 'assert($("svg").attr("width") == "500", "The <code>svg</code> element should have a <code>width</code> attribute set to 500.");'
- text: <code>svg</code>元素的<code>height</code>属性应设置为100。
testString: 'assert($("svg").attr("height") == "100", "The <code>svg</code> element should have a <code>height</code> attribute set to 100.");'
Challenge Seed
<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>
Solution
// solution required