d3.js - Confused about data joins, select and selectAll -

i'm confused data joins.

i have entering group element, called genter, append

genter.append("g").attr("class", "datalabels"); 

datalabels container element each data label make.

g update selection original group element. bind data this:

var datalabels = g.select(".datalabels")     .selectall(".datalabel")     .data(function(d) {return d;}); 

where d coming parent g element. each new data point append .datalabel, , give starting position 30 pixels axis:

var datalabelsenter = datalabels.enter()     .append("g")     .attr("class", "datalabel")     .attr("transform", function(d, i) { return "translate("+ (xscale(d.category) + (xscale.rangeband() / 2)) +","+(yscale(0) - 30)+")"; }); 

each .datalabel container 2 text elements, append them each new data point:

datalabelsenter.append("text")     .attr("class", "category")     .attr("text-anchor", "middle")     .style("font-weight", function(d, i) {         return (d.category == 'total')             ? 'bold'             : 'normal';     })     .text(function(d) {return d.category;});  datalabelsenter.append("text")     .attr("class", "value")     .attr("text-anchor", "middle")     .attr("transform", "translate(0,20)")     .style("font-weight", "bold")     .style("fill", function(d, i) {          return (d.count >= 0)             ? '#1f77b4'             : '#bb1a03';     })     .text(function(d) {         var accounting = d3.format(",");         return (d.count >= 0)             ? '+$' + accounting(d.count)             : '-$' + accounting(-d.count);     }); 

i move update code, things interesting. first, update position of container .datalabel element. works well:

datalabels     .transition()     .duration(duration)     .attr("transform", function(d, i) {return "translate("+ (xscale(d.category) + (xscale.rangeband() / 2)) +","+( yscale(d3.max([d.count,0])) - 30)+")"; }); 

now want update values of labels. try this:

datalabels     .selectall(".value")     .text(function(d, i) {         var accounting = d3.format(",");         // return d.count;         return (d.count >= 0)             ? '+$' + accounting(d.count)             : '-$' + accounting(-d.count);     }); 

but doesn't work. try rebinding data, using .data(function(d){return d;}), no avail. no matter do, if data updates, here it's still same initial draw. however, if switch to

datalabels     .select(".value")     .text(function(d, i) {         var accounting = d3.format(",");         // return d.count;         return (d.count >= 0)             ? '+$' + accounting(d.count)             : '-$' + accounting(-d.count);     }); 

it works.

can explain why latter selection gets updated data, former selection doesn't? i've read mike bostock's recent article on selections, still little confused. believe has sentence article:

only selectall has special behavior regarding grouping; select preserves existing grouping.

perhaps selectall creating new groups each .datalabel element, data not being bound them? i'm not sure.

the difference selection.select propagates data parent child, whereas selection.selectall not. read paragraph quoted again, in non-grouping operations section:

only selectall has special behavior regarding grouping; select preserves existing grouping. select method differs because there 1 element in new selection each element in old selection. thus, select propagates data parent child, whereas selectall not (hence need data-join)!

so, when did data join on datalabels, you’ve updated data on parent elements. when call datalabels.selectall(".value"), doesn’t propagate data, getting old child data. if switch datalabels.select(".value"), propagates data selected children, new data again.

you have propagated data using selection.data, too, since each label has 1 value element here, using selection.select easier.

(also, might want specify key function.)