4

私はd3でデータ駆動型の視覚化を行っています。私はサンバーストに似た構造を持っています（ただし、単一のレイヤーで、中央に穴のある円グラフのようなものです）。

キーボードの矢印をクリックすると、視覚化されたデータが変化し、サンバーストが発生します。特に、innerRadiusはデータの特定のプロパティに応じて変化し、一部の要素が追加、削除、更新されます。

あるサンバーストから別のサンバーストに正しく移行することができません。既存の要素の更新を除けば、移行はほぼ問題ありません。

たとえば、次の2つのデータに共通の要素があります。

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

と

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

上記の例では、d3 WebサイトのSunburstの例のように、要素Aに対応するアークがスムーズに更新され、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"

データが一方と他方の間で変化するときに問題があると思いますが、それを解決する方法がわかりません。

4

1 に答える 1

10

解析エラーは、SVGのエリプティカルアークコマンドAのナイーブパス補間によって発生します。楕円形の円弧の形式は、「rxryx軸回転large-arc-flagスイープフラグxy」です。アークコマンドでデフォルトのパス補間を使用する場合、値が0または1しかないフラグの1つも誤って補間しようとする可能性があります。このエラーは、innerRadiusを有効または無効にした場合に常に発生します。

d3.svg.arcパスデータにデフォルトの文字列補間を使用しないでください。アークは、カスタムトゥイーンを使用して極座標で補間する必要があります。データ空間でアークを補間する方法を示す2つの短い例を次に示します。

于 2012-04-10T14:34:20.017 に答える