メソッドのシーケンスは次のように呼び出すことを含む：D3パス：.DATAに使用角括弧される理由は、（[...]）パスを作成D3で
var path = svg.append("path")
.data([points])
.attr("d", d3.svg.line()
.tension(0) // Catmull–Rom
.interpolate("cardinal-closed"));
上述以下から抜粋され、これ：
https://bl.ocks.org/mbostock/1705868
pointsが配列自身であることを考えると、なぜそれがメソッド呼び出し.data([points])に角括弧内の点を囲む必要がありますか？
私はこの内側の大括弧の要件がd3 v3とv4で得られると考えています。
@ davenewtonさんのコメントです。単純な答えは、d3.lineが配列を必要とするということです。配列の配列を.dataに渡すことで、d3のデータバインディングは配列の配列の最初の配列で.attrを呼び出します。
このコードを調べます。私たちは通常、データバインディングを使用し、それはenterを満たしていないので、これはデータバインディングの奇妙な使用である
<!DOCTYPE html>
<html>
<head>
<script data-require="[email protected]" data-semver="4.0.0" src="https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<script>
d3.select('body')
.append('div')
.data([1,2,3])
.attr('d', function(d, i){
console.log(d, i);
});
</script>
</body>
</html>update、exit （それでは、の最初の繰り返しというバインディングが呼び出されただけです）。
最後に、このコードのように書くことができることに留意されたい。
var path = svg.append("path")
.datum(points)
.attr("d", d3.svg.line()
.tension(0) // Catmull–Rom
.interpolate("cardinal-closed"));
あるいは：
var path = svg.append("path")
.attr("d", d3.svg.line()
.tension(0) // Catmull–Rom
.interpolate("cardinal-closed")(points));
ので：
.append("path")
.data([array])
.attr("d", line)
と
.append("path")
.datum(array)
.attr("d", line)
と
.append("path")
.attr("d", line(points))
はすべて同じです。
ボディに複数のdiv（または何か）がある場合、複数のパスを生成できることは、それぞれのdivに1つずつありますか？そしてそれが配列の配列が配備されている理由です。 – Argent
@Argent、いいえ、 '.append（...）.data（...）。attr（...）'と書かれたやり方では、配列内の最初の引数に対してのみ追加して反復処理を行います。複数の項目を追加する場合は、データバインディングの ''従来の使用法、 '.selectAll（...）。data（...）。enter（...）.append（） ...） ' – Mark
@Argent、mbostockは実際には' .data'呼び出しをちょっと巧妙に使っています。なぜ私はそれを書いているのか分からない（私は持っていないだろう）。私は同じ結果を得ることができる別の方法で私の答えを更新しました。 – Mark
配列の配列が必要だと思います。 –