D3.js动画分组的条形图具有可变的组数



我正在尝试从中调整动画分组的条形图示例https://bl.ocks.org/aholachek/fb0c1cd7ea9707bc8ff55a82402c54b1

出于我自己的目的。我现在一直陷入的一种修改是,我的数据将具有可变数量的组,Xaxes和块必须相应调整大小。

我已经添加了

的域的调整大小
  x0.domain(data[Object.keys(data)[0]].map(obj =>obj.name))
  x1.domain(valueKeys).rangeRound([0, x0.bandwidth()])

在更新功能中,但这似乎还不够。虽然钢筋的宽度正确调整了尺寸,但X值并未均匀地间隔,而是在初始创建后添加更多元素时将其推入图形的最右角。目前,我只关心分组版本,而不是堆叠的版本。

我会说明任何指针

问题可以通过在更新之前清除Barcontainer来解决。当然,这可以防止已经存在的酒吧过渡,但这对我来说已经足够

最新更新