плавный переход линейного графика d3 и угловой

Question

Нужна помощь в создании плавного создания, сброса и обновления линии графика, что означает добавление к ней переходов. Спасибо за вашу помощь. Я попробовал несколько учебных пособий, но добавление .transition к созданию заставляет график больше не появляться. Я использовал Angular.js и библиотеку d3.j, чтобы создать это. Данные генерируются случайным образом, и этот код как раз для меня, чтобы узнать угловые и d3. Любая помощь будет принята с благодарностью.

       var app = angular.module('chartApp', []);

        app.controller('SalesController', ['$scope', '$scope','$scope','$scope', function($scope, $interval){
            $scope.salesData=[
                {hour: 1,sales: 54},
                {hour: 2,sales: 66},
                {hour: 3,sales: 77},
                {hour: 4,sales: 70},
                {hour: 5,sales: 60},
                {hour: 6,sales: 63},
                {hour: 7,sales: 55},
                {hour: 8,sales: 47},
                {hour: 9,sales: 55},
                {hour: 10,sales: 30}
            ];

            $scope.create_value = function(){
                var hour=$scope.salesData.length+1;
                var sales= Math.round(Math.random() * 100);
                $scope.salesData.push({hour: hour, sales:sales});
            };

            $scope.update_value = function(){

                var stop=$scope.salesData.length;
                var current_length=stop;
                var start=1;
                while(stop>0) {
                    $scope.salesData.pop();
                    stop--;
                }

                while(start<=current_length) {
                    var hour = start;
                    var sales = Math.round(Math.random() * 100);
                    $scope.salesData.push({hour: hour, sales: sales});
                    start++;
                }
            };

            $scope.delete_value = function(){
                var hour=$scope.salesData.length;
                $scope.salesData.pop();
            };
        }]);

        app.directive('linearChart', function($parse, $window){
            return{
                restrict:'EA',
                template:"<svg width='850' height='200'></svg>",
                link: function(scope, elem, attrs){
                    var exp = $parse(attrs.chartData);

                    var salesDataToPlot=exp(scope);
                    var padding = 20;
                    var pathClass="path";
                    var xScale, yScale, xAxisGen, yAxisGen, lineFun;

                    var d3 = $window.d3;
                    var rawSvg=elem.find('svg');
                    var svg = d3.select(rawSvg[0]);

                    scope.$watchCollection(exp, function(newVal, oldVal){
                        salesDataToPlot=newVal;
                        redrawLineChart();
                    });

                    function setChartParameters(){

                        xScale = d3.scale.linear()
                            .domain([salesDataToPlot[0].hour, salesDataToPlot[salesDataToPlot.length-1].hour])
                            .range([padding + 5, rawSvg.attr("width") - padding]);

                        yScale = d3.scale.linear()
                            .domain([0, d3.max(salesDataToPlot, function (d) {
                                return d.sales;
                            })])
                            .range([rawSvg.attr("height") - padding, 10]);

                        xAxisGen = d3.svg.axis()
                            .scale(xScale)
                            .orient("bottom")
                            .ticks(salesDataToPlot.length - 1);

                        yAxisGen = d3.svg.axis()
                            .scale(yScale)
                            .orient("left")
                            .ticks(5);

                        lineFun = d3.svg.line()
                            .x(function (d) {
                                return xScale(d.hour);
                            })
                            .y(function (d) {
                                return yScale(d.sales);
                            })
                            .interpolate("basis");

                        lineFun2 = d3.svg.line()
                            .x(function (d) {
                                return xScale(d.hour);
                            })
                            .y(function (d) {
                                return yScale(d.sales);
                            })
                            .interpolate("step-after");
                    }

                    function drawLineChart() {

                        setChartParameters();

                        svg.append("svg:g")
                            .attr("class", "x axis")
                            .attr("transform", "translate(0,180)")
                            .transition()

                            .duration(300)
                            .call(xAxisGen);

                        svg.append("svg:g")
                            .attr("class", "y axis")
                            .attr("transform", "translate(20,0)")
                            .transition()

                            .duration(300)
                            .call(yAxisGen);

                        svg.append("svg:path")
                            .attr({
                                d: lineFun(salesDataToPlot),
                                "stroke": "tomato",
                                "stroke-width": 2,
                                "fill": "none",
                                "class": pathClass
                            });
                        svg.append("svg:path")
                            .attr({
                                d: lineFun2(salesDataToPlot),
                                "stroke": "teal",
                                "stroke-width": 2,
                                "fill": "none",
                                "class": pathClass
                            });

                    }

                    function redrawLineChart() {

                        setChartParameters();

                        svg.selectAll("g.y.axis").call(yAxisGen);

                        svg.selectAll("g.x.axis").call(xAxisGen);

                        svg.selectAll("."+pathClass)
                            .attr({
                                d: lineFun(salesDataToPlot)
                            });

                        svg.select("."+pathClass)
                            .attr({
                                d: lineFun2(salesDataToPlot)
                            });
                    }

                    drawLineChart();
                }
            };
        });

.axis path,
        .axis line{
            fill: none;
            stroke:rgb(100,100,100);
            shape-rendering:crispEdge;
        }

        .axis text{
            font-family: sans-serif;
            font-size: 10px;
        }

        h1{
            font-family: sans-serif;
            color:rgb(60,60,60);
            font-size: 24px;
        }
        .tick
        {
            stroke-dasharray: 1, 2;
        }

        button {
            background-color:tomato;
            color:white;
            border:none;
            padding:10px 20px;
            margin-bottom: 40px;
        }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div ng-app="chartApp" ng-controller="SalesController" style="margin:1em auto; text-align:center; width:100%;">
    <h1>Some sale values chart</h1>
    <button ng-click="create_value()">Add</button>
    <button ng-click="delete_value()">Remove</button>
    <button ng-click="update_value()">Refresh graph</button>
    <br>
    <div linear-chart chart-data="salesData"></div>
</div>