向折线图d3中的不同折线添加过渡

Question

I have a line chart with two lines called in this way

svg.append("path")
               .attr("class","line")
               .attr("d",line1(data))
               .style("stroke","blue");

          svg.append("path")
               .attr("id",'tag2')
               .attr("d",line2(data))
               .style("stroke","red");

and I want to add the same transition to both of the lines,the transition is the following

transition().duration(2500).attrTween("d",pathTween);
           function pathTween() {
                var interpolate = d3.scale.quantile()
                                    .domain([0,1])
                                    .range(d3.range(1, data.length + 1));
                return function(t) {
                    return line(data.slice(0, interpolate(t)));
                };
            }

in practice this one has the effect of drawing the line on the chart,how can i call it to draw both of the lines? thanks!

Answer 1

Finally I've done it!

http://bl.ocks.org/abm-adnan/raw/cb1ece4b962ac3770325/

http://bl.ocks.org/abm-adnan/cb1ece4b962ac3770325

https://gist.github.com/abm-adnan/cb1ece4b962ac3770325

My modifications are here:

graphmen = svg.append("path")
    .attr("class", "line")
    .attr("id", 'tag1')
    //.attr("d", line1(data))
    .style("stroke", "blue");

/* svg.append("text").text("Men").attr("transform",function(d){
    "translate("+xScale(d.anno)+","+yScale(d.uomo)+")";
}) ; */
graphmen.transition().duration(2000).attrTween("d",pathTween1);
function pathTween1() {
    var interpolate = d3.scale.quantile()
        .domain([0, 1])
        .range(d3.range(1, data.length + 1));
    return function(t) {
        return line1(data.slice(0, interpolate(t)));
    };
}


graphwomen = svg.append("path")
    .attr("class", "line")
    .attr("id", 'tag2')
   // .attr("d", line2(data))
    .style("stroke", "red");

graphwomen.transition().duration(2000).attrTween("d",pathTween2);
function pathTween2() {
    var interpolate = d3.scale.quantile()
        .domain([0, 1])
        .range(d3.range(1, data.length + 1));
    return function(t) {
        return line2(data.slice(0, interpolate(t)));
    };
}

Answer 2

Solution is to use a custom tween function that knows how to interpolate point:

Code

 <script src="https://d3js.org/d3.v3.min.js"></script> <script> var svg = d3.select('body') .append('svg') .attr({ "width": 700, "height": 500, }); var array = [ [100, 100], [150, 150], [200, 100], [250, 150], [300, 100], [350, 150] ]; var line = d3.svg.line(); line.interpolate("monotone"); Draw_(); setInterval(function(){ d3.select('svg').html(''); Draw_(); },2500) function Draw_(){ var path_ = svg.append('path') .attr({ "transform": "translate(0,0)" }) .style({ "stroke": "steelblue", "stroke-width": 5, "fill": "none" }) path_ .transition() .duration(2000) .attrTween("d", function(d) { return lineTween.call(this, array) }) } function lineTween(b) { var num = array.length; var arr_ = []; for(var i = 0; i <= num; i++) { arr_.push(1 / num * i) } return function(t) { var i = 0 while(arr_[i] < t) { i++; } var new_arr = interpolateArrays(i, t) function interpolateArrays(index, time, array) { index--; if(!array) array = b; var fixed_arr = array.slice(0, index); var current_arr = array.slice(index, index + 2); var line_interpolate = d3.interpolate([current_arr[0], current_arr[0]], current_arr); var r = arr_.slice(index, index + 2) var scale = d3.scale.linear() .domain(r) .range([0, 1]); var slice_arr = line_interpolate(scale(t)); return d3.merge([fixed_arr, slice_arr]) } return line(new_arr) } } </script>