Parameter No Of Type Node Error With Nested Data In D3

I know there a are a bunch of D3 nesting question and answers here, but I can't seem to figure out what is going wrong with mine. I created the following gist a while back when I

Solution 1:

The problem is that .append() doesn't take a function that returns the element name -- you must either specify the element name as a string or return the DOM element from the function. So in your case, this would look like this:

.append(function(d) {
  returndocument.createElementNS(d3.ns.prefix.svg, d.type);
})

While this does make it work in your case, doing this in general would also require you to specify all the attributes in the data as different types of element have different attributes. This could make your code and data quite messy and introduce hard-to-debug bugs when the wrong kind of data is specified.

It's usually easier and safer to stick with the standard D3 approach. You can achieve the same thing by filtering the data before passing it to .data():

gEnter.selectAll("line.child")
  .data(function(d) {
    return d.segments.filter(function(e) { return e.type == "line"; });
  })
  .enter()
  .append("line")

and similarly for other types of elements.