D3转换不会为DOM添加新栏

时间:2014-04-08 15:38:35

标签: javascript d3.js

添加或删除数据元素时,轴会正确更新。它看起来像“条形”对象使用正确的“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);
}

0 个答案:

没有答案