D3 v4 树——增加清晰度答案

【问题标题】：D3 v4 Tree -- Adding ClarityD3 v4 树——增加清晰度
【发布时间】：2018-08-23 02:41:12
【问题描述】：

我正在制作一个树形图（最初基于https://bl.ocks.org/tejaser/55c43b4a9febca058363a5e58edbce81）

我已将方向翻转为自上而下，但我需要处理子节点的外观——当整个树被扩展时，标签重叠并且你无法真正看到哪些标签去什么节点。

我不确定是否应该修改路径的计算方式，或者是否有办法为每个节点添加排斥力，因此节点之间肯定有最小空间。想法？

我的代码在这里：https://jsfiddle.net/KateJean/2t13ryh6/

文字：

// Add labels for the nodes
  nodeEnter.append('text')
     .attr("dy", ".35em")
        .attr("y", function(d) { return d.children ? -20 : 20; })
      .attr("text-anchor", function(d) {
          return d.children || d._children ? "middle" : "middle";
      }) 
      .text(function(d) { return d.data.name; }) 
        .style("fill", function(d){return colorScale(d.data.female/(d.data.value))});

【问题讨论】：

你必须将这些文本垂直定位，看看这个问题是如何完成的stackoverflow.com/q/51941373/9938317
或这个答案stackoverflow.com/a/51640430/9938317
我绝对喜欢将文本转换为垂直的想法。这有助于澄清问题，但我仍然有一些重叠。我更新了 JSFiddle 以显示文本交换。

标签： javascript d3.js

【解决方案1】：

使用旋转角度 (-90) 和 text-anchor、dx 和 dy

也许是y 位置，我已经为这个演示禁用了它。

  nodeEnter.append('text')
     .attr("dy", "0.2em")
     .attr("dx", "-1.3em")
     .attr("transform", function(d) { return "rotate(" + (d.children ? "0" : "-90") + ")"; })
     .attr("text-anchor", "end")
     //.attr("y", function(d) { return d.children ? -20 : 0; })
     .attr("text-anchor", function(d) {
          return d.children || d._children ? "end" : "end";
      }) 
     .text(function(d) { return d.data.name; }) 
     .style("fill", function(d){return colorScale(d.data.female/(d.data.value))});

【讨论】：