d3.js序数轴没有正确更新

Question

我创建了一个简单的，可更新的d3.js条形图。 除了x轴，它工作正常。

当我从图表中删除条形图时，相应的轴标签不会被删除。

但是，当我除去条第二次，在第一次运行中删除的条的标签从轴移除。

正在发生的事情在这里，为什么？

看到这里工作演示：http://jsfiddle.net/vACua/4/

JS代码将是如下：

var BarChart = function (config) { 

    var data, 
    svg, 
    xScale, 
    yScale, 
    yAxis, 
    xAxis; 

    svg = d3.select('#' + config.targetElement).append('svg'); 

    svg.attr("width", config.width + config.margin.left + config.margin.right) 
     .attr("height", config.height + config.margin.top + config.margin.bottom) 
     .attr("transform", "translate(" + config.margin.left + "," + config.margin.top + ")"); 

    xScale = d3.scale.ordinal(); 
    yScale = d3.scale.linear(); 

    xAxis = d3.svg.axis().scale(xScale).orient("bottom").tickSize(-config.height, 0).tickPadding(6); 
    svg.append('g').classed('x-axis-group axis', true); 

    svg.append("g") 
     .classed("x axis", true) 
     .attr("transform", "translate(0," + height + ")") 
     .call(xAxis); 


    // All methods and members defined here are public 
    return { 
     setData: function (newData) { 
      data = newData; 
      this.updateChart(); 
     }, 
     updateChart: function() { 
      var xDomain = data.map(function (d) { 
       return d.name; 
      }), 
       yDomain = data.map(function (d) { 
        return d.value; 
       }); 



      xScale.domain(xDomain) 
       .rangeRoundBands([config.margin.left, config.width], 0.05); 

      yScale.domain([0, d3.max(data, function (d) { 
       return d.value; 
      })]) 
       .range([config.height, 0]); 


      xAxis.scale(xScale) 
       .orient("bottom") 
       .tickSize(-config.height, 0) 
       .tickPadding(6); 

      var dataSections = svg.selectAll("g.bar") 
       .data(data, function (d) { 
       return d.name; 
      }); 


      // adding new bars 
      dataSections.enter() 
       .append('g') 
       .attr('class', 'bar') 
       .append("rect") 
       .attr("height", 0); 

      var transition = svg.transition().duration(750); 

      transition.selectAll("g.bar").select('rect') 
       .attr("x", function (d, i) { 
       return xScale(d.name); 
      }) 
       .attr("y", function (d) { 
       return yScale(d.value); 
      }) 
       .attr("width", xScale.rangeBand()) 
       .attr("height", function (d) { 
       return height - yScale(d.value); 
      }); 


      dataSections.exit().transition().remove(); 



      svg.select('.x.axis') 
       .transition() 
       .duration(500) 
       .attr({ 
       transform: 'translate(0,' + (config.height) + ')' 
      }) 
       .call(xAxis); 




     } 
    }; 
}; 

var margin = { 
    top: 20, 
    right: 20, 
    bottom: 30, 
    left: 40 
}, 
width = 960 - margin.left - margin.right, 
    height = 250 - margin.top - margin.bottom; 


amount = 15; 

function init() { 
    var margin = { 
     top: 20, 
     right: 20, 
     bottom: 30, 
     left: 40 
    }, 
    width = 400 - margin.left - margin.right, 
     height = 250 - margin.top - margin.bottom; 

    var chart = BarChart({ 
     targetElement: 'foo', 
     margin: margin, 
     width: width, 
     height: height 
    }); 

    setRandomData = function() { 
     var data = []; 
     for (var i = 0; i <= amount; i++) { 
      data.push({ 
       name: "a" + i, 
       value: Math.floor((Math.random() * 300) + 1) 
      }); 
     } 
     amount = amount - 5; 

     chart.setData(data); 
    } 
} 

init(); 
setRandomData(); 
setTimeout(setRandomData, 2000); 
setTimeout(setRandomData, 4000); 

Answer 1

好吧，我绝对不知道为什么，但此行之前移动

svg.select('.x.axis') 
    .transition() 
    .duration(500) 
    .attr({transform: 'translate(0,' + (config.height) + ')'}) 
    .call(xAxis); 

：

var transition = svg.transition().duration(750); 

似乎按照您的意图工作：http://jsfiddle.net/Y274x/