如何通过链接切换和重新加入来维护d3色标

Question

我有一个d3区块：https://bl.ocks.org/anonymous/70ad367d980d33160d0681881ab10aae

我关注的功能是切换链接的滑块（基于此示例：https://bl.ocks.org/jrladd/c76799aa63efd7176bd9006f403e854d）。此功能有效，但一旦链路阈值发生变化，我实施的色标不会延续。颜色比例在图形第一次渲染时是正确的，但一旦阈值改变就会改变/不正确。当阈值返回到最低值时，色标仍然不正确。

我尝试将相同的变量用于初始渲染和新渲染的色阶，这会返回相同的错误结果。

如何在切断和重新加入链接时保持色标的准确性？

Answer 1

如果你在事件处理程序中console.log(d.value)，你会看到输入选择（d.value）中的基准值（linkEnter）总是< / strong> 179（这是最后一个值）。这是预期的，因为默认情况下数据绑定功能通过索引绑定数据。

话虽如此，这里的解决方案只是使用key function：

link = link.data(newData, function(d){ return d.value});
//this is the key function -----^

由于d.value中的值不是唯一的，因此更好的解决方案是为链接创建唯一属性。

除此之外，不要忘记更新“更新”选项中的颜色。

以下是更新的bl.ocks：https://bl.ocks.org/anonymous/59f0783654d89e5a45c55ecf150032bc