Question

我在d3.js中有一个简单的折线图，我希望为该线的绘图设置动画。小提琴：here。动画方面有效，但我想要从左到右绘制线条，而不是像小提琴那样从右到左绘制。为什么从最后到开头绘制线而不是副

/*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

该线从右侧动画，因为您从totalLength的偏移量设置为0.因此，您的动画起始点为：行在结束时开始，动画结束是该行从实际开始处开始。您只需转动此逻辑，即可通过设置.attr("stroke-dashoffset", -totalLength)

以负偏移开始

我通过这个小改动更新了您的fiddle。

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

1 个答案: