D3.js树重叠

Question

如下图所示，我有这棵树，其中不是兄弟姐妹的节点重叠：

Picture of Tree with overlapping nodes

您可以看到'为什么1'与'因素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和the associated gist

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