Question

我正在研究树形图（最初基于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))});

Answer 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))});

D3 v4树-增加清晰度

1 个答案: