D3.js 树重叠答案

【问题标题】：D3.js Tree OverlapD3.js 树重叠
【发布时间】：2018-02-23 20:26:09
【问题描述】：

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

Picture of Tree with overlapping nodes

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

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

Here is the original code

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

【问题讨论】：

标签： javascript d3.js svg servicenow

【解决方案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

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

【讨论】：

谢谢，这为我指明了解决问题的方向。我将 x 属性设置为一个小数字，并将无子节点移动到点/圆的左侧。