Published
Edited
Nov 8, 2019
Insert cell
Insert cell
Insert cell
Insert cell
md`ここで無名関数がどのようにデータの値にアクセスし、どのようにそれを cx と cy の値に渡しているのかに注意してください。
\`function(d)\` という関数を見つけると、D3 は自動的に現在のデータの値を関数の引数 \`d\` に渡します。ここでは \`dataset\` 全体配列の中の、一つの部分配列が渡されます。

関数に渡された \`d\` が値の配列であった場合(つまり \`3.14159\` のような単一の値でない場合)、配列内の値にアクセスするためにはブラケット記法を使う必要があります。
そのためここでは \`d\` ではなく、\`d[0]\` と \`d[1]\` を返しています。
\`d[0]\` が配列の最初の要素、\`d[1]\` が配列の二番目の要素です。

たとえば最初のデータポイントの配列 \`[5, 20]\` の場合、配列の最初の値(配列の 0 番目)は 5 であり、二番目の値(配列の 1番目)は 20 となります。

\`d[0]\` : 5 を返す
\`d[1]\` : 20 を返す

さて、もし全体配列の \`dataset\` の値にアクセスしたい場合はどうすればいいでしょうか? 
たとえば D3 の外でアクセスしたい場合です。その場合もやはりブラケット記法を使います。

\`dataset[5]\` : 配列 [410, 12] を返す。

ネストした配列内の値にアクセスするには角括弧を数珠つなぎにします。

\`dataset[5][1]\` :12 を返す。

腑に落ちない場合は、もう一度[先ほどのサンプル画面](http://alignedleft.com/tutorials/d3/making-a-scatterplot/1.html)を開き、JavaScript コンソール画面を開いて \`dataset[5]\`、あるいは \`dataset[5][1]\` とタイプしてみましょう。
どんな結果になりましたか?
`
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more