D3.js join 函数打破了圆环图 SVG 结构

Question

我正在尝试使用 D3.js 来实现类似“仪表图”（或圆环图）的数据集，该数据集表示网络设备状态与具有此类状态的设备数量之间的绑定：

{
  "Operational": 1,
  "Warning": 4,
  "Offline": 2,
  ...
}

数据集可能会随着时间的推移而改变：可以添加一些其他状态，可以删除一些状态，和/或也可以更改数量。

我已经实现了执行此操作的逻辑，但是有时在某些特定数据集上它会破坏根 SVG 元素的结构。

重现步骤

要重现它，请打开this JSFiddle：如您所见，一切正常：每个

<path>

都在其父级

<g>

下。

<svg width="400" height="200" viewBox="-200,-150,400,200" style="display: block; max-width: 100%; height: auto; margin: 0 auto;">
  <g>
    <path d="M-98.99819570566463,-0.5977014496607642A99,99,0,0,1,-80.2110753965349,-58.02743647389048L-54.39727983232389,-39.11439564717636A67,67,0,0,0,-66.99733392439637,-0.5977014496607781Z" fill="green"></path>
  </g>
  <g>
    <path d="M-79.50457242815314,-58.991719444482634A99,99,0,0,1,-0.10270506233973228,-98.9999467255926L-0.2627087045622808,-66.99948495426325A67,67,0,0,0,-53.69077686394212,-40.078678617768546Z" fill="lightblue"></path>
  </g>
  <g>
    <path d="M1.0926828944767046,-98.99396973600017A99,99,0,0,1,98.99819570566463,-0.5977014496607955L66.99733392439637,-0.5977014496607884A67,67,0,0,0,0.9326792522541477,-66.99350796467084Z" fill="red"></path>
  </g>
</svg>

但是，当我通过单击“使用 2^nd 数据集”按钮更改数据集时，我看到 2 个

<path>

位于同一个

<g>

下，并且其中一个

<g>

为空：

<svg width="400" height="200" viewBox="-200,-150,400,200" style="display: block; max-width: 100%; height: auto; margin: 0 auto;">
  <g>
    <path d="M-98.99819570566463,-0.5977014496607642A99,99,0,0,1,-70.25076521837927,-69.75550147645815L-47.67937956857289,-47.07097581265926A67,67,0,0,0,-66.99733392439637,-0.5977014496607781Z" fill="lightblue"></path>
    <path d="M-69.4033771719701,-70.59866313978799A99,99,0,0,1,90.99166365362825,-39.006629507623266L61.5038381189291,-26.575889385692513A67,67,0,0,0,-46.83199152216371,-47.914137475989136Z" fill="green"></path>
  </g>
  <g>
  </g>
  <g>
    <path d="M91.45601811020627,-37.905101918153754A99,99,0,0,1,98.99819570566463,-0.5977014496607516L66.99733392439637,-0.5977014496607587A67,67,0,0,0,61.9681925755071,-25.474361796223004Z" fill="red"></path>
  </g>
</svg>

看起来仍然不错，但是当数据再次发生变化时，这种不正确的结构会破坏逻辑。

问题

我的问题是：我做错了什么？我认为问题出在数据连接键函数，但我无法理解根本原因。

游乐场

参见我的JSFiddle。

Answer 1

我认为这与每次修改相同的 svg 有关。我不确定您的错误发生的确切原因，但似乎饼的各个部分达到了不再在两个数据集值之间进行调整的程度。我可以通过每次单击按钮时重置 svg 来解决该问题。下面的代码删除旧的 svg 并创建一个新的。

function useFirstDataset() {
  d3.selectAll("svg > *").remove();
  updateGaugeData(FIRST_DATASET);
}

function useSecondDataset() {
  d3.selectAll("svg > *").remove();
  updateGaugeData(SECOND_DATASET);
}