Files

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

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

4.7 KiB

Raw Permalink Blame History

id, title, challengeType, forumTopicId, dashedName

id	title	challengeType	forumTopicId	dashedName
587d7fa9367417b2b2512bce	各バーの座標を動的に設定する	6	301487	dynamically-set-the-coordinates-for-each-bar

--description--

前回のチャレンジでは、長方形を作成し、それを dataset 内の各ポイントの svg 要素に追加することでバーを描きました。しかし残念ながら、すべてのバーが重なり合っていました。

長方形の配置は x 属性と y 属性で処理されます。これらの属性は、svg 領域内のどこから図形を描き始めるかを D3 に指示します。前回のチャレンジではそれぞれ 0 に設定されたので、すべてのバーが左上隅に配置されました。

棒グラフの場合、すべてのバーの垂直方向の位置がそろっている必要があります。つまり、y の値はすべてのバーで同じ値 (0) に固定されます。一方、x の値は、新しいバーを追加する際に変更される必要があります。 x の値が大きいほどアイテムが右へ大きく移動するということを思い出してください。 dataset の配列要素を調べると、x の値が増えているはずです。

D3 の attr() メソッドは、その属性を動的に設定するコールバック関数を受け入れます。コールバック関数は 2 つの引数をとります。一つはデータポイント自体 (通常は d)、もう一つは配列内におけるデータポイントのインデックスです。インデックスを示す 2 番目の引数はオプションです。フォーマットは次のとおりです。

selection.attr("property", (d, i) => {

})

重要な注意点として、for ループを記述したり、forEach() を使用してデータセット内のアイテムを繰り返したりする必要はありません。既に学んだように、data() メソッドはデータセットを解析し、data() の後にチェーンされるあらゆるメソッドがデータセット内の各アイテムに対して一度実行されます。

--instructions--

インデックスの 30 倍が返るように、x 属性コールバック関数を変更してください。

注: 各バーの幅は 25 なので、x の値を 30 ずつ増やすとバーの間にスペースが追加されます。この例では、25 より大きい値はいずれも有効です。

--hints--

最初の rect は x 値を 0 にする必要があります。

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

2 番目の rect は x 値を 30 にする必要があります。

assert($('rect').eq(1).attr('x') == '30');

3 番目の rect は x 値を 60 にする必要があります。

assert($('rect').eq(2).attr('x') == '60');

4 番目の rect は x 値を 90 にする必要があります。

assert($('rect').eq(3).attr('x') == '90');

5 番目の rect は x 値を 120 にする必要があります。

assert($('rect').eq(4).attr('x') == '120');

6 番目の rect は x 値を 150 にする必要があります。

assert($('rect').eq(5).attr('x') == '150');

7 番目の rect は x 値を 180 にする必要があります。

assert($('rect').eq(6).attr('x') == '180');

8 番目の rect は x 値を 210 にする必要があります。

assert($('rect').eq(7).attr('x') == '210');

9 番目の rect は x 値を 240 にする必要があります。

assert($('rect').eq(8).attr('x') == '240');

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

    svg.selectAll("rect")
       .data(dataset)
       .enter()
       .append("rect")
       .attr("x", (d, i) => {
         // Add your code below this line



         // Add your code above this line
       })
       .attr("y", 0)
       .attr("width", 25)
       .attr("height", 100);
  </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);

    svg.selectAll("rect")
       .data(dataset)
       .enter()
       .append("rect")
       .attr("x", (d, i) => {
         return i * 30
       })
       .attr("y", 0)
       .attr("width", 25)
       .attr("height", 100);
  </script>
</body>

4.7 KiB Raw Permalink Blame History