1

在某些情况下，我能够将我的数据绑定到父元素（例如<svg>容器），然后附加子<path>元素，然后d用数据更新它们的属性。其他时候，我似乎无法做到这一点。

例如，在我的代码中，我有

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

其中allSeries是我的三个时间序列数据的 3 元素数组。然后我为每个元素添加一个path。

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

嵌套组需要将其数据源声明为标识函数才能访问父组的子元素：

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

例如，您可以将二维数组绑定到初始选择，然后将包含的内部数组绑定到每个子选择。在这种情况下，values 函数是标识函数：它为每组子元素调用，传递绑定到父元素的数据，并返回这个数据数组。

于 2013-02-03T17:53:35.550 回答