The `select` operator and data inheritance. about d3

[mbostock]

Fixed. Changed to

if (subnode && "__data__" in node) subnode.__data__ = node.__data__;

[saifelse]

I think this is still problematic. The code snippet found here: https://github.com/mbostock/d3/wiki/Selections#wiki-data has nested data. In trying to call select on a single td, its data (a single number) gets overwritten by its parent td's data (an array of numbers). My workaround for now, has been to do selectAll and then filter to reduce the size of the selection to the element I care about. The issue is demonstrated in this fiddle: http://jsfiddle.net/FUJa6/1/

I feel as though the fix is more confusing than the original implementation. It is also strange that select modifies __data__ , while selectAll does not.

Fix 1
It seems like in most cases, if a child node already has data, you would not want it to inherit its parent's data. To fix the boolean/null problem, we could do:

if (subnode && !("__data__" in subnode)) subnode.__data__ = node.__data__;

Fix 2
A second alternative would be to consider the 'freshest' data; whichever data is newest should win. __data__ could be augmented with a global counter that tracks when the data was set. If both the subnode and node have data, the data with a higher counter would win. This seems overly complex, and I can't think of a good example of when this scenario arises.

Fix 3
To get rid of any ambiguities, I think it is cleaner to never inherit data from the parent. select is then non-volatile. In the cases that you do want to use the parent data, you can use each, to create a closure. For example, instead of:

d3.selectAll('div').data(divData);
d3.selectAll('div').selectAll('p').text(function(d){ return d;});

you would do:

d3.selectAll('div').data(divData);
d3.selectAll('div').each(function(divData){
    d3.select(this).selectAll('p').text(divData);
});

from d3.