0

私はd3の初心者です。$n$ エンティティのデータ セットを要素にバインドし、Enter を呼び出して操作を実行すると、それらの操作が $n$ 回実行されることを読みました。

ただし、ここでは、データセットのサイズが 4 であっても、段落は 3 回しか追加されません: http://jsfiddle.net/johnhoffman/tYr5U/

d3.select("body").data([1, 2, 3, 4]).enter().append("p").text("g");

出力：

g
g
g

なんで3回だけ？

4

1 に答える 1

4

これがあなたが使いたいと思うコードです。

d3.select("body").selectAll("p").data([1,2,3,4]).enter().append("p").text("g");

結合は、「body」要素ではなく、「p」要素で行う必要があります。

あなたの例に3つある理由について：

データには 4 つの要素があり、単一の「body」要素にバインドされています。デフォルトでは、最初の要素 1 は既存の本文 (HTML で定義) にバインドされます。残りの 3 つの要素は、存在しない「body」要素にバインドされます。「enter()」は存在しない要素に対してのみ呼び出されるため、追加操作は DOM のルートで 3 回呼び出されます。

これを実証するには、次を試してください。

d3.select("body").data([1,2,3,4]).enter().append("p").text(function(d) {return d;});

また、g の代わりに追加されるデータの数値が表示されます。

紛らわしいですが、円のチュートリアルはこれを理解するのに役立ちました.

于 2013-02-12T20:41:03.870 に答える