带有退化树的d3径向树错误

Question

I am building a program that displays trees using d3's radial tree ( http://bl.ocks.org/mbostock/4063550 ). I have no control over the incoming trees. I have a problem that if the incoming tree has only a single node (the root), then I get an error like this:

Error: Invalid value for <g> attribute transform="rotate(NaN)translate(0)"

I get the even more errors if the root has a single child, and so on (like a singly linked list of nodes). Here are the errors for two nodes:

Error: Invalid value for <path> attribute d="MNaN,NaNCNaN,NaN NaN,NaN NaN,NaN"
Error: Invalid value for <g> attribute transform="rotate(NaN)translate(0)"
Error: Invalid value for <g> attribute transform="rotate(NaN)translate(180)"
Error: Invalid value for <g> attribute transform="rotate(NaN)translate(360)"

The problem seems to be that the x value of the node gets set to NaN. Does anyone know of a fix for this?

Answer 1

I implemented your a.depth fix in the separation function, and it seems to be drawing properly: http://jsfiddle.net/1Ljaajpf/1/

var tree = d3.layout.tree()
.size([360, diameter / 2 - 80])
.separation(function(a, b) { 
    // Added protection for degenerate case of one child
    if (a.depth == 0)
       return 1;

  return (a.parent == b.parent ? 1 : 10) / a.depth; 
});

Maybe there is something else in your code which is causing drawing of the child to fail? For example, an issue with the translate/rotate/scale functions that could cause the child node to move out of visible area (or the child node is too small)