SVG 텍스트를 d3을 사용하여 원 주위를 회전 한 다음 d3을 사용합니다.

Question

원 중심을 중심으로 회전하여 레이블이 배치되는 시각적 효과가 있습니다. 그러나 이것은 원의 왼쪽에있는 모든 레이블이 거꾸로되어 있음을 의미합니다. 이 회전이 일어난 후에 왼쪽 주위의 레이블을 회전시킬 수 있습니까?

시각화가 d3js.org

에서 zoomable 햇살을 기반으로 관련 코드는 : 난 당신이 x 및 y 좌표를 알고있는 경우이 가능 알고 있기 때문에 나는 아래의 코드를 시도

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

텍스트의및 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})