Javascript 堆叠条形图未正确更新d3js

在堆叠条形图中，我添加了一个平分线和一个自定义的

x.invert

函数，以便您可以读取每个月的值：

问题是，当我添加此自定义函数时，团队2和3的矩形不再更新现有的

rect

，而是在从“选择”下拉列表中选择不同类别时从左上角重新绘制条形图，我不知道为什么

---

删除与

x.invert

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

这段代码似乎是您的错误：

let barGroups = g.selectAll("g.layer")
  .data(stacking, d=>d.key.split(' ')[0]);

将第二个参数传递给

.data

方法。根据：

selection.data（[data[，key]]））

。。。可以指定一个键函数来控制 将基准指定给哪个图元，替换默认值 通过计算每个数据的字符串标识符和 元素

---

如果您删除它，您的可视化将正常工作。

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

不要删除它，只需修复键功能即可。现在的问题是既然钥匙是

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

。。。对于选定的数据集，此

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

。。将为每个组返回

TEAM

，并且键显然不能相同

所以，只要做

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

甚至只是

d.key.slice(0, -3)

。。。将返回：

team1

、

team2

和

team3

---

这是您更新的Plunker:

不要删除您的键函数，这不是一个好的做法。@Gerardofurta如果我们不传递该函数，会出现什么问题？@MikhailShabrikov如果您只有enter选择，则无。但是，如果您有一个更新选择，根据数据结构，可能会发生很多问题。看看这里：@MikhailShabrikov我们今天刚刚有一个例子，因为缺少一个关键功能，事情就破裂了！看看：@GerardoFurtado非常有用的案例，谢谢。