Files

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

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

3.2 KiB

Raw Blame History

id, title, challengeType, forumTopicId, dashedName

id	title	challengeType	forumTopicId	dashedName
587d7fa8367417b2b2512bcb	D3 の SVG について学ぶ	6	301489	learn-about-svg-in-d3

--description--

SVG とは Scalable Vector Graphics (スケーラブル・ベクター・グラフィックス) の略称です。

ここで言う「スケーラブル」とは、オブジェクトをズームインまたはズームアウトしてもピクセル化されないことを意味します。携帯電話の小さな画面であれ、大型テレビの画面であれ、ディスプレイシステムに合わせて画像が調整されます。

SVG は、一般的な幾何学的図形を作成するために使用されます。データを視覚的な表現にマッピングする D3 は、SVG を使用して視覚化用の図形を作成します。ウェブページの用 SVG 図形は、HTML の svg タグ内に位置する必要があります。

(vh、 vw、パーセンテージなどの) 相対単位をスタイルに使用すれば、 CSS でもスケーラブルに表現できます。しかし SVG を使用すれば、より柔軟にデータを可視化できます。

--instructions--

append() を使用して body に svg ノードを追加してください。そのノードに対し、与えられた w 定数に設定された width 属性と、与えられた h 定数に設定された height 属性を設定してください。それぞれ、attr() メソッドまたは style() メソッドを使用して行ってください。これは出力結果を見れば確認できます。style タグ内で、ピンクの background-color が適用されているからです。

**注: ** attr() を使用する場合、幅と高さの属性には単位がありません。これはスケーリングの基礎であり、ズームレベルに関係なく要素の幅と高さの比率は常に 5:1 です。

--hints--

ドキュメントには 1 個の svg 要素が必要です。

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

svg 要素は、width 属性を 500 に設定するか、幅が 500px になるようにスタイルを調整する必要があります。

assert($('svg').attr('width') == '500' || $('svg').css('width') == '500px');

svg 要素は、height 属性を 100 に設定するか、幅が 100px になるようにスタイルを調整する必要があります。

assert($('svg').attr('height') == '100' || $('svg').css('height') == '100px');

--seed--

--seed-contents--

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

--solutions--

<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")
                  .append("svg")
                  .attr("width", w)
                  .attr("height", h)
  </script>
</body>

3.2 KiB Raw Blame History