3.2 KiB
3.2 KiB
id | title | required | challengeType | videoUrl | localeTitle | |||
---|---|---|---|---|---|---|---|---|
587d7fa8367417b2b2512bcc | Display Shapes with SVG |
|
6 | 使用SVG显示形状 |
Description
svg
元素,这是可见的,因为它在style
标记中应用了background-color
。代码为给定的宽度和高度创建了空间。下一步是创建一个放入svg
区域的形状。 SVG中有许多支持的形状,例如矩形和圆形。它们用于显示数据。例如,矩形( <rect>
)SVG形状可以在条形图中创建条形。将形状放入svg
区域时,可以指定x
和y
坐标的位置。 (0,0)的原点位于左上角。 x
正值将形状推向右侧, y
正值将形状从原点向下推。要将形状放置在距离上次挑战的500(宽度)x 100(高度) svg
的中间, x
坐标将为250, y
坐标将为50. SVG rect
具有四个属性。它位于svg
区域的位置有x
和y
坐标。它还有一个height
和width
来指定大小。 Instructions
append()
为svg
添加一个rect
形状,并为其赋予width
属性25和height
属性100.此外,将每个设置的rect
x
和y
属性设置为0。 Tests
tests:
- text: 您的文档应该有1个<code>rect</code>元素。
testString: 'assert($("rect").length == 1, "Your document should have 1 <code>rect</code> element.");'
- text: <code>rect</code>元素的<code>width</code>属性应设置为25。
testString: 'assert($("rect").attr("width") == "25", "The <code>rect</code> element should have a <code>width</code> attribute set to 25.");'
- text: <code>rect</code>元素的<code>height</code>属性应设置为100。
testString: 'assert($("rect").attr("height") == "100", "The <code>rect</code> element should have a <code>height</code> attribute set to 100.");'
- text: <code>rect</code>元素的<code>x</code>属性应设置为0。
testString: 'assert($("rect").attr("x") == "0", "The <code>rect</code> element should have an <code>x</code> attribute set to 0.");'
- text: <code>rect</code>元素的<code>y</code>属性应设置为0。
testString: 'assert($("rect").attr("y") == "0", "The <code>rect</code> element should have a <code>y</code> attribute set to 0.");'
Challenge Seed
<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)
// Add your code below this line
// Add your code above this line
</script>
</body>
Solution
// solution required