Files
Nicholas Carrigan (he/him) 3da4be21bb chore: seed chinese traditional (#42005)
Seeds the chinese traditional files manually so we can deploy to
staging.
2021-05-05 22:43:49 +05:30

2.5 KiB
Raw Permalink Blame History

id, title, challengeType, forumTopicId, dashedName
id title challengeType forumTopicId dashedName
587d7fa8367417b2b2512bcc 用 SVG 顯示形狀 6 301485 display-shapes-with-svg

--description--

上個挑戰用給定的寬和高創建了一個 svg 元素,因爲在它的 style 標籤中有 background-color,所以它是可見的。 這一段代碼爲給定的寬和高騰出空間。

下一步是在 svg 區域中創建圖形。 SVG 支持多種圖形,比如矩形和圓形, 並用它們來顯示數據。 例如,在條形圖中一個矩形(<rect>SVG 圖形可以創建一個組。

當把圖形放入 svg 區域中時,你可以用 xy 座標來指定它的位置。 起始點 (0,0) 是在左上角。 x 正值將圖形右移,y 正值將圖形從原點下移

若要把一個圖形放在上個挑戰的 500x 100svg 中心,可將 x 座標設置爲 250y 座標設置爲 50。

SVG 的 rect 有四個屬性。 xy 座標指定圖形放在 svg 區域的位置, heightwidth 指定圖形大小。

--instructions--

append()svg 添加一個 width25height100rect 形狀。 同時,將 rectxy 都設置爲 0

--hints--

文檔應該有 1 個 rect 元素。

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

rect 元素的 width 應爲 25

assert($('rect').attr('width') == '25');

rect 元素的 height 應爲 100

assert($('rect').attr('height') == '100');

rect 元素的 x 值應爲 0

assert($('rect').attr('x') == '0');

rect 元素的 y 值應爲 0

assert($('rect').attr('y') == '0');

--seed--

--seed-contents--

<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>

--solutions--

<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)
                  .append("rect")
                  .attr("width", 25)
                  .attr("height", 100)
                  .attr("x", 0)
                  .attr("y", 0);
  </script>
</body>