如何使用transform屬性更改圓形svg元素的位置？

Question

我目前在D3JS中構建了一張sunburst圖表，並試圖將圓圈添加到每個節點。您可以在這裏查看當前項目：https://jsfiddle.net/mhxuo260/。

我想將每個圓圈放置在各自節點的右上角。目前他們只會在覆蓋節點標籤的中心位置。我一直在網上尋找線索，但還沒有拿出任何東西。任何建議，將不勝感激。

d3.json("flare.json", function(error, root) { 
if (error) throw error; 

var g = svg.selectAll("g") 
    .data(partition.nodes(root)) 
    .enter().append("g"); 

path = g.append("path") 
    .attr("d", arc) 
    .attr('stroke', 'white') 
    .attr("fill", function(d) { return color((d.children ? d : d.parent).name); }) 
    .on("click", magnify) 
    .each(stash); 

var text = g.append("text") 
    // .attr("x", function(d) { return d.x; }) 
    // .attr("dx", "6") // margin 
    // .attr("dy", ".35em") // vertical-align 
    .text(function(d) { 
     return d.name; 
    }) 
    .attr('font-size', function(d) { 
     return '10px'; 
    }) 
    .attr("text-anchor", "middle") 
    .attr("transform", function(d) { 
     if (d.depth > 0) { 
      return "translate(" + arc.centroid(d) + ")" + 
        "rotate(" + getStartAngle(d) + ")"; 
     } else { 
      return null; 
     } 
    }) 
    .on("click", magnify); 

var circle = g.append('circle') 
    .attr('cx', function(d) { return d.x }) 
    .attr('cy', function(d) { return d.dy; }) 
    .attr('r', '10') 
    .attr('fill', 'white') 
    .attr('stroke', 'lightblue') 
    .attr("transform", function(d) { 
     console.log(arc.centroid(d)) 
     if (d.depth > 0) { 
      return "translate(" + arc.centroid(d) + ")" + 
        "rotate(" + getStartAngle(d) + ")"; 
     } else { 
      return null; 
     } 
    }); 

Answer 1

您正在使用總是返回圓弧的x，y中點的'''arc.centroid''函數。所有這些功能做的是：

The midpoint is defined as (startAngle + endAngle)/2 and (innerRadius + outerRadius)/2 

你只需要計算取決於你想要它使用這些值不同的位置。使用像這樣的轉換（sudo代碼）：

.attr("transform", function(d) { 
     var x = (startAngle + endAngle)/2; 
     var y = (innerRadius + outerRadius)/2; 

     return "translate(" + x +"," + y + ")"; 
    }); 

你不需要旋轉你的圈子。 （通過用逗號連接每個數字，javascript將數組轉換爲字符串，這就是爲什麼arc.centroid返回數組的原因）