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

あなたが言うとき、私は「それは文句を言わない私が座標としてDXとDYを通過させ、」あなたは何を意味するかは100％を確認していないが、あなたは、文字列として変数名に合格しようとしているように見えます変数の値の代わりにの値を使用します。下のコードでは、.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})