向折線圖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>