什么时候绑定到其子级可用的父级数据? [英] When is data bound to a parent available to its children?
问题描述
在某些情况下,我已经能够将我的数据绑定到父元素(例如,< svg>
容器),然后追加子< path>
元素,然后使用数据更新其 d
属性。
On certain occasions I have been able to bind my data to a parent element (say, the <svg>
container), then append child <path>
elements, and then update their d
attributes with the data. Other times, it seems I can't do this.
例如,在我的代码中,我有
For example, in my code I have
var svg = d3.select(this).selectAll("svg").data([allSeries]);
其中 allSeries
是一个3元素数组的我的三个时间序列数据。然后为每个元素添加一个路径
where allSeries
is a 3-element array of my three time series data. I then add a path
for each element.
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);
};
后来,当要添加/更新数据时,我尝试过
Later, when it's time to add/update the data, I tried this
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
?中读取数据?
So how can I get my .line
elements to read the data from svg
?
推荐答案
嵌套组需要声明它的数据源作为身份函数,才能访问父组的子元素:
The nested group needs to declare it's data source as the identity function in order to have access to the child elements of the parent group:
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
This is better explained in the documentation of the selection.data() function here: https://github.com/mbostock/d3/wiki/Selections#wiki-data
例如,您可以将二维数组绑定到初始选择,然后将包含的内部数组绑定到每个子选择。在这种情况下,值函数是identity函数:它为每个子元素组调用,传递绑定到父元素的数据,并返回这个数组。
For example, you may bind a two-dimensional array to an initial selection, and then bind the contained inner arrays to each subselection. The values function in this case is the identity function: it is invoked for each group of child elements, being passed the data bound to the parent element, and returns this array of data.
这篇关于什么时候绑定到其子级可用的父级数据?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!