使用d3旋轉圍繞一個圓的SVG文本然後圍繞它自己使用d3

Question

我有一個可見的位置，通過圍繞圓心旋轉來放置標籤。但是這意味着圓圈左側的所有標籤都是顛倒的。這種旋轉發生後，是否可以在左側旋轉標籤？

可視化是基於從d3js.org

的zoomable旭日相關的代碼是：

function computeTextRotation(d) { 
    var angle=(d.x +d.dx/2)*180/Math.PI - 90; 
    return angle; 
} 

var texts = svg.selectAll("text") 
     .data(partitioned_data) 
     .enter().append("text") 
     .filter(filter_min_arc_size_text)  
     .attr("transform", function(d) {return "rotate(" + computeTextRotation(d) + ")"}) 
     .attr("x", function(d) { return radius/3 * d.depth; })  
     .attr("dx", "6") // margin 
     .attr("dy", ".35em") // vertical-align 
     .text(function(d,i) {return d.name}) 

我嘗試下面的代碼，因爲我知道這是可能的，如果你知道x和y座標的文字，但它不會讓我通過d.x和d.y作爲座標。

var texts = svg.selectAll("text") 
     .data(partitioned_data) 
     .enter().append("text") 
     .filter(filter_min_arc_size_text)  
     .attr("transform", function(d) { 
      if (computeTextRotation(d)>90&&computeTextRotation(d)<270) { 
       return "rotate(" + computeTextRotation(d) + ") rotate(d.x,d.y,180)"; 
      } else { 
       return "rotate(" + computeTextRotation(d) + ")"; 
      }}) 
     .attr("x", function(d) { return radius/3 * d.depth; })  
     .attr("dx", "6") // margin 
     .attr("dy", ".35em") // vertical-align 
     .text(function(d,i) {return d.name}) 

Answer 1

我不是100％肯定你的意思是當你說「它不會讓我過去dx和dy爲座標，」但它看起來像你正試圖在變量名作爲字符串傳遞而不是變量的值。在下面的代碼中，我改變了你的.attr（「tranform」）來傳遞d.x和d.y的值。

var texts = svg.selectAll("text") 
    .data(partitioned_data) 
    .enter() 
    .append("text") 
    .filter(filter_min_arc_size_text)  
    .attr("transform", function(d) { 
     if (computeTextRotation(d)>90&&computeTextRotation(d)<270) { 
      return "rotate(" + computeTextRotation(d) + 
        ") rotate(" + d.x + "," + d.y + ",180)"; 
     } else { 
      return "rotate(" + computeTextRotation(d) + ")"; 
     } 
    }) 
    .attr("x", function(d) { return radius/3 * d.depth; })  
    .attr("dx", "6") // margin 
    .attr("dy", ".35em") // vertical-align 
    .text(function(d,i) {return d.name})