AngularJS + D3動畫條形圖指令

Question

我有一個從this example雕刻的AngularJS指令。

我讀過一些關於做轉換圖表like this one和stackoverflow issue但沒有運氣的教程。

我的圖表是非常基本的，看起來像：

下面是我的指令代碼，爲什麼這些轉變例子不工作任何想法？

 var width = 960 - opts.margin.left - opts.margin.right, 
      height = 500 - opts.margin.top - opts.margin.bottom; 

     var formatPercent = d3.format(opts.format); 

     var x = d3.scale.ordinal() 
      .rangeRoundBands([0, width], .1); 

     var y = d3.scale.linear() 
      .range([height, 0]); 

     var xAxis = d3.svg.axis() 
      .scale(x) 
      .orient("bottom"); 

     var yAxis = d3.svg.axis() 
      .scale(y) 
      .orient("left") 
      .tickFormat(formatPercent); 

     var color = d3.scale.ordinal() 
       .range(colorbrewer.Blues[4]); 

     var svg = d3.select($elem[0]).append("svg") 
      .attr("width", width + opts.margin.left + opts.margin.right) 
      .attr("height", height + opts.margin.top + opts.margin.bottom) 
      .append("g") 
      .attr("transform", "translate(" + opts.margin.left + "," + opts.margin.top + ")") 

     $scope.render = function(data) { 
      // remove all previous items before render 
      svg.selectAll('*').remove(); 

      x.domain(data.map(function(d) { return d[opts.xaxisProperty]; })); 
      y.domain([0, d3.max(data, function(d) { return d[opts.yaxisProperty]; })]); 

      svg.append("g") 
       .attr("class", "x axis") 
       .attr("transform", "translate(0," + height + ")") 
       .call(xAxis) 
       .append("text") 
       .attr("x", opts.xaxisPos) 
       .attr("dx", ".71em") 
       .style("text-anchor", "end") 
       .text(opts.xaxisName); 

      svg.append("g") 
       .attr("class", "y axis") 
       .call(yAxis) 
       .append("text") 
       .attr("transform", "rotate(-90)") 
       .attr("y", opts.yaxisPos) 
       .attr("dy", ".71em") 
       .style("text-anchor", "end") 
       .text(opts.yaxisName); 

      var i = 0; 
      svg.selectAll(".bar") 
       .data(data) 
       .enter().append("rect") 
       .style("fill", function(d) { return color(++i); }) 
       .attr("class", "bar") 
       .attr("x", function(d) { return x(d[opts.xaxisProperty]); }) 
       .attr("width", x.rangeBand()) 
       // tried to apply .transition() here 
       .attr("y", function(d) { return y(d[opts.yaxisProperty]); }) 
       .attr("height", function(d) { return height - y(d[opts.yaxisProperty]); })  
     } 

Answer 1

爲了使棒上呈現向上滑動，這種替換當前欄添加代碼：

svg.selectAll(".bar") 
    .data(data) 
    .enter().append("rect") 
    .style("fill", function(d) { return color(++i); }) 
    .attr("class", "bar") 
    .attr("x", function(d) { return x(d[opts.xaxisProperty]); }) 
    .attr("width", x.rangeBand()) 
    .attr("y", height) 
    .attr("height", 0) 
    .transition().duration(500) 
    .attr("y", function(d) { return y(d[opts.yaxisProperty]); }) 
    .attr("height", function(d) { return height - y(d[opts.yaxisProperty]); });