数据更改时在d3.js中重绘条形图

Question

我正在使用与Angularjs集成的d3.js开发条形图。我正在使用的角度指令代码如下。我的问题是，在我的实际应用中，条形图不是重绘，但是当与条形图关联的数据发生变化时，其轴会发生变化

mainApp.directive('ngDatenobargraph', function() {
return {
    restrict: 'AE',
    scope: {
        data: '='
            },
    link: function (scope, element) {

        var margin = {top: 10, right: 10, bottom: 40, left: 60},
        width = 410 - margin.left - margin.right,
        height = 230 - margin.top - margin.bottom;

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

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

        var tip = d3.tip()
                  .attr('class', 'd3-tip')
                  .offset([-10, 0])
                  .html(function(d) {
                      return "<span style='font-size: 13px'>Date:&nbsp</span><span style='color:red;font-size: 13px'>" + d.xValue+ "</span><br>"+
                             "<span style='font-size: 13px'>Net Value:&nbsp</span><span style='color:red;font-size: 13px'>" + d.yValue+ "</span><br>"+
                             "<span style='font-size: 13px'>Buy Value:&nbsp</span><span style='color:red;font-size: 13px'>" + d.buyValue+ "</span><br>"+
                             "<span style='font-size: 13px'>Sell Value:&nbsp</span><span style='color:red;font-size: 13px'>" + d.sellValue+ "</span>";
                      });

        chart.call(tip);

        //Render graph based on 'data'
        scope.render = function(data) {
            if(data) {




                var y = d3.scale.linear()
                        .range([height, 0])
                        .domain(d3.extent(data, function(d) { return d.yValue; }))
                        .nice();

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

                var yAxis = d3.svg.axis().scale(y).orient("left").ticks(7);

                x.domain(data.map(function(d) { return d.xValue; }));

                //Redraw the axes
                chart.selectAll('g.axis').remove();

                chart.append("g")
                     .attr("class", "x axis")
                     .attr("transform", "translate(0," + (height) + ")")
                     .call(xAxis)
                     .selectAll("text")
                     .style("text-anchor", "end")
                     .attr("dx", "-.8em")
                     .attr("dy", ".15em")
                     .attr("transform", function(d) {
                         return "rotate(-20)";
                         }); 

                chart.append("g")
                     .attr("class", "y axis")
                     .call(yAxis)
                     .append("text")
                     .attr("transform", "rotate(-90)")
                     .attr("y", 0-margin.left)
                     .attr("x",0-(height / 2))
                     .attr("dy", "1em")
                     .style("text-anchor", "middle")
                     .text("Net Value");

                chart.selectAll(".bar")
                      .data(data)
                      .enter().append("rect")
                      .attr("class", function(d) { return d.yValue < 0 ? "bar negative" : "bar positive"; })    
                      .attr("x", function(d) { return x(d.xValue); })                     
                      .attr("y", height)
                      .attr("height", 0)
                      .on('mouseover', tip.show)
                      .on('mouseout', tip.hide)
                      .transition().duration(2000)
                      .attr("y", function(d) {return y(Math.max(0, d.yValue)); })
                      .attr("height", function(d) {return Math.abs(y(d.yValue) - y(0)); })    
                      // .attr("width", x.rangeBand()); 
                      .attr("width", Math.min.apply(null, [x.rangeBand()-2, 100]));

            }
        };

        scope.$watch('data', function() {
            scope.render(scope.data);
            }, true);

    }
  };
});

我是d3.js的新手。如果有任何解决方案，请帮助我。申请中的代码是http://jsfiddle.net/HB7LU/9000/