D3 v4樹—添加清晰度

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