Files

camperbot 5c868af2b8 chore(i18n,learn): processed translations (#44851 )

2022-01-20 20:30:18 +01:00

3.3 KiB

Raw 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 領域に図形を配置するときは、x 座標と y 座標に対応した位置を指定できます。原点 (0, 0) は左上の隅にあります。 x が正の値であれば図形は原点から右へ移動し、y が正の値であれば図形は原点から下へ移動します。

前回のチャレンジで使用した 500 (幅) x 100 (高さ) の svg の中央に図形を置くには、x 座標を 250、y 座標を 50 に設定します。

SVG rect には 4 つの属性があります。 x 座標と y 座標は、svg 領域内で図形が置かれる位置を示します。また、サイズを指定する height と width があります。

--instructions--

append() を使用して rect 図形を svg に加え、その width 属性を 25、height 属性を 100 に設定してください。また、rect x 属性と y 属性をそれぞれ 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>

3.3 KiB Raw Blame History