javascript - 当只有独生子女时，d3 不会绘制树？

Question

看起来(如果我犯了错误，请指出)如果你尝试用一条线绘制一棵树(即子节点没有 fork ，每个子节点只有一个子节点。)就像 this d3 树布局似乎无法绘制它。

另一方面，确保至少有一个分割，如 here它绘制得很好(我还做了一个测试，在同一棵树中同时具有单叶节点和双叶节点，并且这按预期工作得很好)。

我的问题是仔细检查这是否是 d3 中的错误或我正在做的事情中的错误。如果您点击我给出的示例，您可以看到 index.html 是相同的(并且完全取自 mike bostacks 示例 here )，唯一的区别在于单个额外的 json 行。

我意识到应该没有理由使用树形网格绘制单线，但这是动态生成的，因此我需要知道是否应该手动排除这些情况并向用户写入消息。

提前致谢。

Answer 1

d3 树本身不关心嵌套级别和子级(或没有子级)。我已经在通用树示例中尝试了您的数据，效果很好。

问题是原始示例中的自定义 .separation 函数不能很好地处理它。如果您查看网络控制台，您会看到如下错误:解析转换属性时出现意外值旋转(NaN)translate(120)。

尝试更改此行:

.separation(function(a, b) { return (a.parent == b.parent ? 1 : 2) / a.depth; });

像这样的事情(没有仔细评估原始版本实际上想要做什么):

  .separation(function(a, b) { 
    if (a.depth == 0) {
      return 1;
    } else {
      return (a.parent == b.parent ? 1 : 2) / a.depth;
    }
  });