d3.js动画线绘制的方向与预期相反

Question

我在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)

Answer 1

该线是从右侧开始的动画，因为您是从totalLength0 偏移量开始进行动画处理。因此，您的动画起点是：线从末尾开始，而动画结束是该线从实际起点开始。您只需要扭转这种逻辑，就可以通过设置使其以负偏移量开头.attr("stroke-dashoffset", -totalLength)

我用这个小改动更新了您的小提琴。