Avoiding D3.js “groupData is undefined”

http://stackoverflow.com/questions/17351376/avoiding-d3-js-groupdata-is-undefined-errors-when-selecting-on-fixed-field-nam?noredirect=1#comment25192696_17351376

by Viet27th

HTML

<svg>

JavaScript

var data = [
    {path: [1,2]},
    null,
    {path:[3,4]}
];

var svg = d3.select('svg').datum(data).attr({'width': 400, 'height':400});

svg.selectAll('g.container')
.data(function(d, i) {
    // note this returns the array of data objects, each one of which will become a "d" to an element of the selection
    return d;
})
.enter()
.append("g").classed("container",true)
.attr({'transform': function(d,i) { return 'translate(0,' + ((i+1) * 18) + ')';}
      })
.append('text')
.attr({
    'fill': 'black', 
})
.text(function(d) { return d ? d.path : 'null';});

svg.selectAll('g.container')
.selectAll('text.path')
.data(function(d) { return d ? d.path : [];})
.enter()
.append('text').classed('path', true)
.attr({'fill': 'blue',
       'transform': function(d,i) { return 'translate(' + (40 + (i*15)) + ',0)';}
      })
.text(function(d) { return d;});