Question

在某些情况下，我能够将数据绑定到父元素（例如，<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读取数据？

Answer 1

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

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函数是identity函数：它为每个子元素组调用，传递绑定到父元素的数据，并返回该数据数组。

何时将数据绑定到其子级可用的父级？

1 个答案: