Question

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]);

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); })

but it didn’t work. This, however, does work

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

So how can I get my .line elements to read the data from svg?

Answer 1

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); })

This is better explained in the documentation of the selection.data() function here: https://github.com/mbostock/d3/wiki/Selections#wiki-data

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.