d3js Web サイトの 2 つの例:
彼らのコードのいくつかは理解しにくいと思います。D3 参照 API は詳細な説明を提供しませんでした。簡単なバージョンでは、次のように Math.random() を使用して頂点が生成されました。
var vertices = d3.range(100).map(function(d) {
return [Math.random() * width, Math.random() * height];
});
幅と高さはドキュメント サイズです。これにより、すべての頂点が SVG 要素の範囲内にあることが保証されます (svg タグには width および height 属性もこれらの値に設定されています)。
ただし、より複雑なバージョンでは、アルゴリズムを使用して頂点を生成します。
var vertices = d3.range(numVertices).map(function(d) { return {x: d.x, y: d.y}; })
voronoiVertices = vertices.map(function(o){return [o.x, o.y, o]})
path = path.data(d3.geom.voronoi(voronoiVertices))
verticesコンソールで変数を調べるとき。二次元配列であることがわかりました。各サブ配列の長さは 3 で、最初と 2 番目の要素は数値で、最後の要素は x、y、インデックスなどのより多くのプロパティを含むオブジェクトです。
結果のボロノイ図は大きく異なります。何故ですか？どちらも を使用して生成されd3.geom.voronoi()、(うまくいけば理解できることから) 唯一の違いは、渡されるオブジェクトにあります。簡単な例では、各サブ配列に 2 つの数値を持つ単純な 2 次元配列でした。複雑な例の 2 行がどのように機能してこのような複雑なオブジェクトを作成し、それを各サブ配列の末尾に追加するのか、私にはわかりません。
頂点が親 SVG 要素の境界内にあることをどのように保証しますか?
私は本当に行き詰まっています。助けてくれてありがとう。