添加或删除数据元素时,轴会正确更新。它看起来像“条形”对象使用正确的“x”和“高度”值更新,但更改不会显示在DOM中。
这是更新功能:
updateChart: function() {
var chart = this,
xScale = this.scales.x,
yScale = this.scales.y,
data = this.collection.toJSON()
padding = this.config.barPadding;
xScale.domain(chart.collection.pluck(chart.config.xAttr));
yScale.domain([0, d3.max(chart.collection.pluck(chart.config.yAttr))]).nice();
var bars = this.svg.select(".bar").data(data);
bars.exit().remove();
bars.enter().append("rect")
.attr("class", "bar")
.attr("id", function(d) { return "bar-" + d[chart.config.xAttr]; })
.attr("data-x", function(d) { return d[chart.config.xAttr]; })
.attr("data-y", function(d) { return d[chart.config.yAttr]; });
chart.svg.select(".x.axis").transition().duration(1000).call(chart.xAxis);
chart.svg.select(".y.axis").transition().duration(1000).call(chart.yAxis);
bars.transition().duration(1000)
.attr("x", function(d) { return xScale(d[chart.config.xAttr]); })
.attr("y", function(d) { return yScale(d[chart.config.yAttr]); })
.attr("width", xScale.rangeBand())
.attr("height", function(d) { return chart.height - yScale(d[chart.config.yAttr]); });
console.log(bars);
}