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

标签 javascript d3.js

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

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

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

最佳答案

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

无需删除它,只需修复关键功能即可。现在的问题是,因为 key 是......

["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 1TEAM 2TEAM 3

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

关于javascript - 堆积条形图未正确更新 d3js,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48425301/

相关文章:

javascript - ReactJS 对象过滤器在 componentDidMount 上未定义

javascript - 无法将值插入数组

javascript - 旭日可视化中的 d3js 分区布局错误

javascript - 动画元素后的 Bootstrap 工具提示

javascript - 在滚动之前,尝试使粘性标题粘在页面加载上

javascript - SVG 如何在 innerHTML 中工作

javascript - 如何使用 Knockout 更改 JS(TS) 中选择组件的值?

javascript - NVD3.js - 多线图表多个 x 轴

javascript - 在 Javascript 中提取大型多维数组的切片

javascript - 将平面 JSON 文件转换为分层 json 数据,如flare.json [d3 示例文件]