freeCodeCamp

2.8 KiB

Raw Blame History

id	title	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);
  - text: <code>rect</code>元素的<code>width</code>属性应设置为25。
    testString: assert($('rect').attr('width') == '25');
  - text: <code>rect</code>元素的<code>height</code>属性应设置为100。
    testString: assert($('rect').attr('height') == '100');
  - text: <code>rect</code>元素的<code>x</code>属性应设置为0。
    testString: assert($('rect').attr('x') == '0');
  - text: <code>rect</code>元素的<code>y</code>属性应设置为0。
    testString: assert($('rect').attr('y') == '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

2.8 KiB Raw Blame History Unescape Escape