title: AngularJS + D3 Animations Bar Chart Directive
body: <p>I've got a AngularJS Directive carved from <a href="http://phloxblog.in/angulard3/start.html#.Usw6ANy9kk9" rel="nofollow noreferrer">this example</a>.</p>
  
  <p>I've read a few tutorials on doing transitions charts <a href="http://bl.ocks.org/enjalot/1429426" rel="nofollow noreferrer">like this one</a> and also this <a href="https://stackoverflow.com/questions/11364809/d3-js-transitions">stackoverflow issue</a> but had no luck.</p>
  
  <p>My chart is pretty basic and looks like: <img src="https://i.stack.imgur.com/2qQjX.png" alt="enter image description here"></p>
  
  <p>Below is my code for the directive, any ideas on why these transition examples aren't working?</p>
  
  <pre><code>       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]); })      
          }
  </code></pre>