D3.js 树重叠

Question

如下图所示，我有这棵树，其中非兄弟节点重叠：

Picture of Tree with overlapping nodes

您可以看到 'Why 1' 与 'Factor 1' 重叠。它重叠是因为分支的最后一个节点出现在点的右侧，但如果该节点有子节点，则该节点将出现在点的左侧。此外，它重叠是因为在分隔节点时，它只将它与兄弟节点分隔开。

如何指定分支的最后一个节点应出现在点的左侧？或者我如何指定两个相邻的节点列应该间隔开，就好像它们在同一列中一样？

Here is the original code

如果通过翻转节点路由，this link 与我想要的类似，但我希望所有节点都在点的左侧。谁能建议如何做到这一点？

Answer 1

控制文本位置的部分是这样的：

  nodeEnter.append("text")
    .attr("x", function(d) { return d.children || d._children ? -10 : 10; })
    .attr("dy", ".35em")
    .attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; })
    .text(function(d) { return d.name; })
    .style("fill-opacity", 1e-6);

属性 x 和 text-anchor 控制文本在左到右的位置。他们检查节点是否有子节点并相应地放置在每一侧。我们可以像这样将所有文本放在左边：

  nodeEnter.append("text")
    .attr("x", -10)
    .attr("dy", ".35em")
    .attr("text-anchor", "end")
    .text(function(d) { return d.name; })
    .style("fill-opacity", 1e-6);

这里有一个bl.ocks example and the associated gist

请下次与我们分享您尝试过的方法。

D3.js 树重叠

D3.js Tree Overlap

javascript

svg

d3.js

servicenow