javascript - 堆叠条形图未正确更新 d3js

Question

在this堆叠条形图我添加了一个平分线和一个自定义 x.invert 函数，因此您可以读取每个月的值:

问题是，当我添加此自定义函数时，团队 2 和 3 的矩形不再更新现有的 rect，而是在您选择不同的类别时从左上角重新绘制条形从选择下拉列表中，我不知道为什么。

删除与 x.invert 函数相关的所有代码会使条形图再次正确更新，因此它可能与 x 域有关，但我不确定。

Answer 1

在绑定(bind)数据的时候使用key函数是D3中一个很好的做法，保证了对象的持久性。因此，与已接受其他答案中的建议相反，您不应将其删除。

与其删除它，不如修复关键函数。现在的问题是，因为键是...

["Team 1 CC", "Team 2 CC", "Team 3 CC"]

...对于选定的数据集，这...

d.key.split(' ')[0]

.. 将为每个组返回TEAM，并且 key 显然不能相同。

所以，就...

d.key.split(' ')[0] + d.key.split(' ')[1]

甚至只是……

d.key.slice(0, -3)

... 将返回:TEAM 1、TEAM 2 和 TEAM 3。

这是您更新的 Plunker:https://plnkr.co/edit/XCvmDj9a3yF37dzDmA6d?p=preview