Javascript d3.js仪表板在鼠标悬停时反转数据

我使用的是d3.js网站上的仪表板示例

我稍微修改了它以满足我的需要，但是，当我将鼠标悬停在直方图上时，我看到低计数和高计数是颠倒的，也就是说，低计数变成高计数，反之亦然

这是我面临的问题的一部分。如您所见，开始时，Low的计数为12，High的计数为0。但当鼠标悬停在蓝色直方图上时，Low的计数变为0，High的计数变为12

---

您是否了解发生这种情况的原因，以及我如何纠正它？

您正在以下两种情况之间更改数据结构：

var freqData=[{"State":"apache-client-utils","freq":{"High":0,"Critical":0,"Low":12,"Medium":0}}];

及

虽然我没有仔细查看，但将freqData更改为：

    var freqData=[{"State":"apache-client-utils","freq":{"Low":12,"Medium":0,"High":0,"Critical":0}}];

---

将从我所看到的位置停止反转问题。

图例仅更新直方图值和百分比，而不更新类型及其颜色。这就是为什么图例似乎正在反转数据；事实并非如此。它只是改变了一半图例的顺序，而另一半保持不变。如果您在更新整个图例的同时更新了值，那么您的小提琴就会呈现出这样的样子：

    var freqData=[{"State":"apache-client-utils","freq":{"Low":12,"Medium":0,"High":0,"Critical":0}}];