D3.js的join函数在构建 doughnut 图表时可能会破坏SVG结构。

Question

我正在尝试使用 D3.js 实现一种类似“仪表图”（或环形图）的效果，用于展示一组数据，该数据表示网络设备的不同状态及其对应数量：

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

请注意，这个数据集可能会随时间变化：可能出现其他状态，某些状态可能被移除，或者数量数字也可能发生变化。

我已经实现了相关的逻辑，但在处理某些特定数据集时，有时会破坏根 SVG 元素的结构。

复现步骤

要复现这个问题，请打开这个 JSFiddle 示例。如你所见，初始状态下一切正常，每个都在其父级元素内。

正确示例代码片段：

正确布局的截图可见：JSFiddle - 正确示例

然而，当你点击“Use 2nd dataset”按钮切换到第二个数据集时，发现其中两个被放在同一个内，而另一个却为空：

错误布局代码片段：

错误布局的截图可见：JSFiddle - 错误布局

尽管视觉效果上似乎仍可接受，但是这种不正确的结构在数据再次改变时会导致逻辑出现问题。

问题

我想问的是：我在哪里做错了？我猜测问题可能出在数据连接的 key 函数上，但我未能理解根本原因。

演示环境

请查看我的 JSFiddle 示例。

Walker · Answer

我认为问题在于每次都在修改同一个svg。我不确定您的错误具体为何发生，但似乎是饼图的各个部分在某个点后无法在两个数据集值之间进行调整。我通过重置每次点击按钮时的svg解决了这个问题。下面的代码会移除旧的svg并创建一个新的。

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

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

Stephen C · Answer

新答案：

您指出的我的原始答案只是掩盖了根本原因。这里真正的问题是缺失值 —— 意味着，基于您的键函数，您拥有的两个数据集在进行数据绑定时会产生缺失键的情况。这导致d3在计算“进入”与“更新”选择集时出现“误判”。

以下是包含注释以解释我所做更改的新运行代码片段：

旧的答案（不够理想）：

你需要保持对所选元素的引用，而不是在每次调用更新函数时重新选择它：

const slices = d3
  .select('figure#gauge_graph svg')
  .selectAll('g');

function updateGaugeData(dataset) {

  slices
    .data(
      pie(Object.entries(dataset)),
      function(datum) {
        return datum.data[0]; // 使用状态名称（如"Operational", "Warning"）作为键
      }
    )
...