在选择格式为d.value的固定字段名称时避免D3.js“ groupData未定义”错误

Question

Probably trivial, but I seem to have a nested data situation for which I can find no guidance. I have an array representing an time progression (index) for which data is only intermittently available:

elem[..]
elem[55].path[..]
elem[56]
elem[57]
elem[58].path[..]
elem[59]
elem[60].path[..]
elem[..]

Empty data points are null:

elem[count] = null;

..whereas, pending further use, path elements are initialised using:

elem[count].path = [];

A large data set is gathered. In the first of the following two blocks of code, I select the array indexes

classes[chan_index].elem_num_container = "elem_num_container" + "_" + comp_id + "_" + chan_index;

chan_selector.elem_num_container[chan_index] = chan_selector.vis_container[chan_index]
.selectAll(classes[chan_index].elem_num_container)
.data(function(d, i) {
    return d;
})
.enter()
.append("svg:g")
.attr("class", function(d, i) {
    return classes[chan_index].elem_num_container;
});

Given so many null elements, in the second block (below), the nested d.path understandably provokes a "groupData is undefined" error.

classes[chan_index].path_container = "path_container" + "_" + comp_id + "_" + chan_index;

chan_selector.path_container[chan_index] = chan_selector.elem_num_container[chan_index]
.selectAll(classes[chan_index].path_container)
.data(function(d, i) {
    return d.path;
})
.enter()
.append("svg:g")
.attr("class", function(d, i) {
    return classes[chan_index].path_container;
});

Basically it comes down to selecting data based on the "d" parameter, followed by a nested selection on "d.value". While preserving the index, I need to side-step the error and select d.path elements, where they exist.

I see plenty nested JSON data examples, but nothing applicable to this case.

Blocked, and grateful for any help.. Thx

Answer 1

From the responses above, elimination of null elements was clearly held to be feasible, throwing doubt on incoming data (checked: all ok) and d3 processing hierarchy (malformed: two processing branches hung on to the same node, one propagating data, the other -the branch in question above- not).

In response, separated the two branches from their parent with new, interstitial svg:g container structures. Result: data on both branches.

Then, as suggested in the responses above, with d.path, I added a filter on the processing branch in question (ie between first and second code blocks in the original question), in the form:

chan_selector.temp[chan_index] = chan_selector.elem_num_container[chan_index]
.filter(function(d) { return typeof(d.path) === 'object'; });

Strangely (given claimed impact of filter on indexing) it works, giving the accustomed d3 eyecandy. :-)

Thanks to Superboggly and Lars Kotthoff for the valuable help and patience.