Files
freeCodeCamp/curriculum/challenges/japanese/04-data-visualization/data-visualization-with-d3/use-the-d3.max-and-d3.min-functions-to-find-minimum-and-maximum-values-in-a-dataset.md
2022-01-20 20:30:18 +01:00

3.0 KiB

id, title, challengeType, forumTopicId, dashedName
id title challengeType forumTopicId dashedName
587d7fac367417b2b2512bdc d3.max 関数および d3.min 関数を使用してデータセット内の最小値と最大値を見つける 6 301496 use-the-d3-max-and-d3-min-functions-to-find-minimum-and-maximum-values-in-a-dataset

--description--

D3 のメソッド domain()range() は、データを基にそれぞれスケールのドメイン情報とレンジ情報を設定します。 同じことをより簡単に行う方法がいくつかあります。

ドメインを設定する場合に、データセット内の最小値と最大値を使いたいことがよくあります。 手作業でこれらの値を見つけようとすると、特にデータセットが大きい場合はミスが起こりがちです。

D3 には、この情報を返すための 2 つのメソッド、min()max() があります。 次に例を示します。

const exampleData = [34, 234, 73, 90, 6, 52];
d3.min(exampleData)
d3.max(exampleData)

データセットの中で配列がネストされている場合があります。散布図の例にあった [x, y] 座標ペアはその一例です。 その場合、最大値と最小値の計算方法を D3 に指示する必要があります。 幸いなことに、min()max() の両メソッドはコールバック関数を取ります。 この例では、コールバック関数の引数 d は現在のネストされた配列に対するものです。 このコールバック関数は、最大値または最小値の計算対象となる、ネストされた配列 (x または y の値) から要素を返す必要があります。 複数の配列中の 1 つの配列における最大値と最小値を見つけるには、例えば次の方法を使用します。

const locationData = [[1, 7],[6, 3],[8, 3]];
const minX = d3.min(locationData, (d) => d[0]);

minX の値は 1 です。

--instructions--

positionData 配列に x、y、z 座標の部分配列が含まれています。 D3 メソッドを使用してこの配列から z 座標の最大値 (3 番目の値) を求め、output 変数に保存してください。

--hints--

h2 内のテキストを 8 にする必要があります。

assert(output == 8 && $('h2').text() == '8');

max() メソッドを使用する必要があります。

assert(
  code.match(/\.max/g),
  'Your code should use the <code>max()</code> method.'
);

--seed--

--seed-contents--

<body>
  <script>
    const positionData = [[1, 7, -4],[6, 3, 8],[2, 9, 3]]
    // Add your code below this line

    const output = undefined; // Change this line

    // Add your code above this line

    d3.select("body")
      .append("h2")
      .text(output)
  </script>
</body>

--solutions--

<body>
  <script>
    const positionData = [[1, 7, -4],[6, 3, 8],[2, 9, 3]]

    const output = d3.max(positionData, (d) => d[2])

    d3.select("body")
      .append("h2")
      .text(output)
  </script>
</body>