值范围更改时，D3更新条的“宽度”属性不起作用

Question

请帮助！ d3js的新功能。根据{{​​3}}

绘制金字塔图

更改数据e.i时，条没有正确更新。数据范围不同于最初创建图形的范围-数据范围超出了其定义的域范围。当用户选择一个值以过滤数据时，金字塔图将发生变化。过滤数据（小计）后，将无法正确绘制图形-并尝试重新绘制图形。如果再次选择总计（默认图表），则会正确绘制。

• 第一个金字塔图的总计数数据范围为[0,99999]。它创建完美。
• 过滤数据以获得小计计数，范围较小[0，999]。值的范围已更改

似乎更新无法正常工作，并使用旧值对“ x”值进行了当前计算。请查看下面的图片以查看效果

更新“ rect”元素代码的属性

bars.selectAll("rect.femalebar")
.transition()
.attr("x", function(d) { return (innerMargin - total(d.f) - 2 * labelSpace); }) 
.attr("width", function(d) { return total(d.f); });

total = d3.scaleLinear().domain([0, dataRange]).range([0, chartWidth - labelSpace])

完整代码可在https://www.jasondavies.com/d3-pyramid/上看到

原始图

https://github.com/aniuska/DataScience/blob/master/Viz-D3/d3pyramid_viz.js

过滤数据后的图形