D3餅圖圓弧在過渡到180°時不可見

我用d3和svg構建餅圖。我使用svg路徑的d屬性上的轉換對餅圖中的更改進行動畫處理。除目標圓弧的大小> = 180°外，其他功能與預期一致。然後在轉換過程中弧形路徑不可見。D3餅圖圓弧在過渡到180°時不可見

我想這是因爲D3的過渡過程中產生無效的路徑信息：

Error: Problem parsing d="M1.4082973068957338e-14,-230A230,230 0 0.0000013720000000000002,1 135.1904225457546,186.07396897283516L0,0Z"

難道我做錯了什麼？這是一個錯誤，有沒有一種方法來工作？

感謝

來源

2014-01-22 Lux

您不能使用普通過渡/補間來爲徑向圖創建動畫效果，因此需要自定義補間功能 - 餅圖已涵蓋了多次，例如， [這個例子]（http://bl.ocks.org/mbostock/1346410）。 –

@Lars，謝謝。它的邏輯是它沒有產生一個不錯的旋轉動畫，但爲什麼它產生了不道德的路徑而不是非最佳的過渡？ – Lux

我會添加一個答案和一些解釋。 –

這裏的問題是，d3.svg.arc()使用A SVG路徑命令繪製橢圓弧。該命令的格式如下。

A (rx ry x-axis-rotation large-arc-flag sweep-flag x y)+

各個參數的含義並不重要，與此有關的唯一的事情是large-arc-flag和sweep-flag。根據SVG spec

四個候選弧的掃描中，兩個將代表大於或等於180度（以下簡稱「大弧」）的弧形掃掠，和兩個將代表的弧形掃小於或等於180度（「小弧」）。如果大弧標記爲'1'，則選擇兩個較大的弧掃描中的一個;否則，如果大弧標記爲'0'，則將選擇其中一個較小的弧形掃描，如果掃描標記爲'1'，則將以「正角度」方向繪製弧（即橢圓公式x = cx + rx *cosθ並且y = cy + ry * sin（θ）被評估爲使得θ開始於對應於當前點的角度並且正向增加直到電弧達到（x， Y））。值爲0將導致電弧以「負角度」方向被繪製（即，θ從對應於當前點的角度值開始並且減小直到電弧到達（x，y））。

正如其名稱所示，這些是標誌，即0/1值。這是d3.svg.arc()生成的。但是，如果使用默認路徑補間使用.transition()在它們之間進行插值，則D3會將它們解釋爲數值而不是標記。這意味着中間路徑的值將介於0和1之間，這些標誌是非法的。這是因爲解析失敗。

要解決此問題，請使用自定義補間（無論如何您都需要爲徑向路徑使用補間）。見例如here舉例說明如何去做。

來源

2014-01-22 15:28:58

非常感謝你的解釋！這是完美的！ – Lux

D3餅圖圓弧在過渡到180°時不可見

回答

相關問題