Javascript d3.js动画线条绘制按预期的相反方向进行

我在d3.js中有一个简单的线图，我希望为线的绘制设置动画。小提琴：。动画方面的工作，但我希望线是从左到右，而不是从右到左的小提琴。为什么这条线是从结尾到开头而不是从反面画出来的

/*canvas setup*/
var margin = {top: 20, right: 20, bottom: 70, left: 100},
            width = 960 - margin.left - margin.right,
            height = 500 - margin.top - margin.bottom;
var svg = d3.select("body").append("svg").attr("id","chart")
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom)
            .append("g")
            .attr("class","container")
            .attr("transform",translate(margin.left,margin.bottom));
function translate(a,b){
    return "translate(" + a + "," + b + ")";
}
/*data*/

    var data = [{
        "time": "2013-03-12 15:09:04",
        "value": "5"
    }, {
        "time": "2013-03-12 14:59:06",
        "value": "65"
    }, {
        "time": "2013-03-12 14:49:04",
        "value": "15"
    }, {
        "time": "2013-03-12 14:39:06",
        "value": "25"
    },{
        "time": "2013-03-12 14:29:03",
        "value": "5"
    }];
    /*end data*/

    var parseDate = d3.time.format("%Y-%m-%d %H:%M:%S").parse;
        data.forEach(function(d) {
            d.time = parseDate(d.time);
            d.value = +d.value;
        });
        //create scales
        var xScale = d3.time.scale()
            .range([0,width])
            .domain(d3.extent(data,function(d){ return d.time})),
            yScale = d3.scale.linear()
                .range([height,0])
                .domain([0,d3.max(data,function(d){ return +d.value})]);

        //create axes
        var xAxis = d3.svg.axis()
            .scale(xScale)
            .orient("bottom")
            .tickFormat(d3.time.format("%H:%m"));

        //create line
        var line = d3.svg.line()
                .x(function(d){return xScale(d.time)})
                .y(function(d){ return yScale(d.value)});

        var _line; //path that will be appended to the chart

        var yAxis = d3.svg.axis()
            .scale(yScale)
            .orient("left");

        var _x = svg.append("g")
                        .attr("class","xAxis")
                        .attr("transform",translate(0,height))
                        .call(xAxis);
       var _y = svg.append("g")
                        .attr("class","yAxis")
                        .call(yAxis);
    //draw line
    function drawLine(){
        _line = svg.append("path")
                        .attr("d", line(data))
                        .attr("stroke", "steelblue")
                        .attr("stroke-width", "2")
                        .attr("fill", "none");

        var totalLength = _line.node().getTotalLength();
        _line.attr("stroke-dasharray", totalLength + " " + totalLength)
                            .attr("stroke-dashoffset", totalLength)
                            .transition()
                            .duration(750)
                            .ease("swing")
                            .attr("stroke-dashoffset", 0);

    }
    setTimeout(function(){
        drawLine();
    },500)

---

该行是从右侧设置动画的，因为从偏移量

totalLength

设置动画为0。因此，动画起点是：线从终点开始，动画终点是线从实际起点开始。 您只需通过设置

.attr（“stroke dashoffset”，-totalLength）来改变此逻辑，使其以负偏移量开始

我用这个小改动更新了你的