如何獲取沿餅圖邊緣的切片座標？

Question

我正在用D3使用d3.layout.pie()創建一個餅圖。 它看起來像這個，沒有黑點（我已經把它們手動放在Photoshop中來說明我的問題）。我想知道如何計算這些點的座標，這些座標位於表面的中間，以便在其中放置一些工具提示。我不是要求一個完成的解決方案，而是更多關於如何去做的原則。 謝謝。

Answer 1

可以使用following equations沿圓的周長計算點：

x = cx + r * cos(a) 
y = cy + r * sin(a) 

哪裏(cx, cy)爲圓心，r爲半徑，並a是角度。

爲了讓它適用於您，您將需要一種基於圖表上的餅形切片計算角度的方法 - 請參閱下文。

---

按照d3 documentation for pie layouts，則pie函數返回弧的列表，這樣你就可以處理這個數據來計算每個點：

餡餅（值[，索引]）

評估指定數組值的餅圖函數。可以指定一個可選的索引，該索引傳遞給開始角度和結束角度函數。返回值是一個弧描述符數組

• value - 值存取器返回的數據值。
• startAngle - 以弧度表示的弧的起始角度。
• endAngle - 以弧度表示的弧末端角度。
• 數據 - 此弧的原始數據。

想必你可以只取endAngle和startAngle之間距離的一半每個弧，並把你的觀點存在。

---

對於它的價值，這裏是從pie.js用來計算每個弧代碼：

// Compute the arcs! 
// They are stored in the original data's order. 
var arcs = []; 
index.forEach(function(i) { 
    var d; 
    arcs[i] = { 
    data: data[i], 
    value: d = values[i], 
    startAngle: a, 
    endAngle: a += d * k 
    }; 
}); 
return arcs; 

---

這是否幫助？

Answer 2

我知道你問了這個問題的那一年，但只是在可能幫助其他人的問題上下了一個答案。 嘗試在要顯示的圓的變換中使用arc.centriod（）。

像這樣的事情

enterMenu.append("circle") 
      .attr("r", 5) 
      .attr('transform',function(d){ 
       return "translate(" + arc.centriod(d) + ")"; 
      }); 

這應放置準確地圈在切片之間。在上面的函數中，d是弧的endAngle。

對於你參考看看這個鏈接http://bl.ocks.org/Guerino1/2295263

Answer 3

這可能聽起來微不足道，但我試圖找到每個片內的X和Y座標，當我看到上面的公式公佈，

X = CX + R * COS（一）

Y = CY + R * SIN（一）

，可以通過從（CX + 1或CY + 1）到半徑長度加大研發完成的，並重復通過將（a）從原點角度增加到目標角度，然後將（ cx，cy）。希望它能幫助別人。