Question

我正在构建一个使用d3径向树（http://bl.ocks.org/mbostock/4063550）显示树的程序。我无法控制传入的树木。我有一个问题，如果传入的树只有一个节点（根），那么我得到这样的错误：

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

如果root有一个子节点，我会得到更多错误，依此类推（就像单个链接的节点列表一样）。以下是两个节点的错误：

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)"

问题似乎是节点的x值设置为NaN。有谁知道修复此问题？

Answer 1

我在分离函数中实现了你的a.depth修复，它似乎正在绘制： 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; 
});

也许您的代码中还有其他内容会导致孩子的绘图失败？例如，translate / rotate / scale函数可能导致子节点移出可见区域（或子节点太小）的问题

d3堕落树木的径向树虫

1 个答案: