堆积的条形图无法正确更新d3js [英] Stacked bar chart not updating correctly d3js

问题描述

在 此 堆积的条形图中添加了等分线和自定义 x.invert 函数，以便您可以读取每个月的值：

In this stacked bar chart I've added a bisector and a custom x.invert function so you can read the values for each month:

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

The problem is that when I added this custom function the rectangles for team 2 & 3 are no longer updating the existing rect but re-draws the bars from the top left when you select a different category from the select dropdown and I have no idea why.

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

Removing all code relating to the x.invert function makes the bars update properly again, so it might have something to do with the x domain but I'm not sure.

推荐答案

在绑定数据时使用键函数是D3中非常好的做法，它可以确保对象的一致性。因此，与接受的其他答案中的建议相反，您不应删除它。

Using a key function when binding the data is a very good practice in D3, which ensures object constancy. So, contrary to the suggestion in the accepted other answer, you should not remove it.

不是删除它，而是修复。现在的问题是，由于键是...

Instead of removing it, just fix the key function. The problem right now is that since the keys are...

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

...对于所选数据集，此...

... for the selected dataset, this...

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

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

.. will return TEAM for every group, and the keys obviously cannot be the same.

所以，就做...

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

甚至只是...

d.key.slice(0, -3)

...，它将返回： TEAM 1 ， TEAM 2 和 TEAM 3 。

... which will return: TEAM 1, TEAM 2 and TEAM 3.

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

Here is your updated Plunker: https://plnkr.co/edit/XCvmDj9a3yF37dzDmA6d?p=preview

这篇关于堆积的条形图无法正确更新d3js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！