1

場合によっては、データを親要素 (<svg>コンテナーなど) にバインドし、子要素を追加して、それらの属性をデータで<path>更新することができました。dまた、これができないようです。

たとえば、私のコードでは

var svg = d3.select(this).selectAll("svg").data([allSeries]);

はallSeries、3 つの時系列データの 3 要素配列です。次に、pathfor each 要素を追加します。

var gEnter = svg.enter().append("svg").append("g");
for (var i = allSeries.length - 1; i >= 0; i--) {
  gEnter.append("path").attr("class", "line").style("opacity", 0);
};

後で、データを追加/更新するときが来たら、これを試しました

g.selectAll(".line")
   .attr("d", function(d) { return line(d.values); })

しかし、うまくいきませんでした。ただし、これは機能します

g.selectAll(".line")
   .data(allSeries)
   .attr("d", function(d) { return line(d.values); })

.lineでは、要素からデータを読み取るにはどうすればよいsvgでしょうか?

4

1 に答える 1

4

ネストされたグループは、親グループの子要素にアクセスできるように、そのデータ ソースを ID 関数として宣言する必要があります。

g.selectAll(".line")
   .data(function(d) {return d;})
   .attr("d", function(d) { return line(d.values); })

これは、こちらの selection.data() 関数のドキュメントでよりよく説明されています: https://github.com/mbostock/d3/wiki/Selections#wiki-data

たとえば、2 次元配列を最初の選択にバインドしてから、含まれている内部配列を各サブ選択にバインドできます。この場合の値関数は識別関数です。子要素のグループごとに呼び出され、親要素にバインドされたデータが渡され、このデータの配列が返されます。

于 2013-02-03T17:53:35.550 に答える