D3.js中的過渡陽光

Question

我正在用d3做數據驅動的可視化。我有一個類似於朝陽的結構（但是有一層，有一箇中間有一個洞的餅圖）。

通過單擊鍵盤上的箭頭，數據可視化發生變化，因此它可以實現陽光。特別是innerRadius根據數據的特定屬性而改變，並且一些元素被添加，刪除和更新。

我無法設法正確地從一個轉換到另一個sunburst。除了更新現有元素之外，轉換幾乎可以。

例如假設我有在數據的兩個下列件共同元件來可視化，如

[{'name': 'A', 'value': 100}, {'name': 'B', 'value': 100}, {'name': 'C', 'value': 100}] 

和

[{'name': 'A', 'value': 300}, {'name': 'D', 'value': 200}]. 

在上述例子中我想對應於弧因爲元素A在d3網站上的Sunburst示例中平滑地更新，所以B和C元素消失（並且我設法做到了這一點）並且D元素順利地出現，例如不斷增長的弧線或類似的東西。

我很努力，但我一直都想與控制檯日誌，如以下幾點：

Error: Problem parsing d="M307.2125548508473,-80.28703629255259A350,350 0 0.816469152,1 -241.27474698802394,61.83978850098657L-172.92635975175665,38.77767308406868A238.60164101523165,238.60164101523165 0 0.816469152,0 210.15560219262875,-60.13103059122014Z" 

我覺得有一個問題，當一個即和其他之間的數據變化，但我不知道如何解決它。

Answer 1

解析錯誤是由SVG的elliptical arc command，A的簡單路徑插值引起的。橢圓弧具有「rx ry x軸旋轉大弧標誌掃描標誌x y」的形式。如果在弧命令上使用默認路徑插值，則可能會無意中嘗試插入其中一個標記，這些標記的值只能爲零或1。如果您啓用或禁用innerRadius，此錯誤將始終發生。

對於d3.svg.arc路徑數據，您不應該使用default string interpolator;弧線必須使用custom tween以極座標進行插值。這裏有兩個例子很短演示瞭如何在數據空間插值弧：

• How-To: Update a Pie Chart (Part 1)
• How-To: Update a Pie Chart (Part 2)