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

Question

我有一个以这种方式调用两行的折线图

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");

我希望向两个行添加相同的转换，转换如下

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)));
                };
            }

在实践中，这个具有在图表上绘制线条的效果，我如何调用它来绘制两条线？谢谢！

Answer 1

最后我完成了它！

  

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

     

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

     

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

我的修改在这里：

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

解决方案是使用知道如何插入点的自定义补间函数：

代码

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