更新多線圖

Question

什麼是多線圖上更新行的正確方法是什麼？簡單地綁定新數據並對'd'屬性進行轉換會產生一些奇怪的轉換。

這裏有一個的jsfiddle複製該

function draw(data) { 
    data.columns = ["date", "New York", "San Francisco", "Austin"]; 

    var cities = data.columns.slice(1).map(function(id) { 
     return { 
      id: id, 
      values: data.map(function(d) { 
       return { 
        date: d.date, 
        value: d[id] 
       }; 
      }) 
     }; 
    }); 

    x.domain(d3.extent(data, function(d) { 
     return d.date; 
    })); 

    y.domain([ 
     d3.min(cities, function(c) { 
      return d3.min(c.values, function(d) { 
       return d.value; 
      }); 
     }), 
     d3.max(cities, function(c) { 
      return d3.max(c.values, function(d) { 
       return d.value; 
      }); 
     }) 
    ]); 

    z.domain(cities.map(function(c) { 
     return c.id; 
    })); 

    xAxisG 
     .transition() 
     .duration(duration) 
     .call(d3.axisBottom(x)); 

    yAxisG 
     .transition() 
     .duration(duration) 
     .call(d3.axisLeft(y)) 

    var city = g.selectAll(".city") 
     .data(cities) 

    function drawLine(d) { 
     d3.select(this).transition() 
      .duration(duration) 
      .attr("d", function(d) { 
       d3.select(this); 
       return line(d.values); 
      }); 
    } 

    city.enter().append("g") 
     .attr("class", "city") 
     .append("path") 
     .attr("class", "line") 
     .style("stroke", function(d) { 
      return z(d.id); 
     }) 
     .each(drawLine); 

    city.select('.line') 
     .each(drawLine); 
}; 

var dataExample = [{"date": "2011-11-22", "New York": 50, "San Francisco": 0, "Austin": 57 }, ...]; 

https://jsfiddle.net/m3kvh29d/

Answer 1

的問題是，我試圖動畫不配備相同數量的點的路徑。

此解決方案1僅適用於線性曲線，如果它在大量點上不是線性的，您仍然可以在開始時獲得'節點'。 這個2與其他類型的曲線（pathTween方法），但是資源昂貴:(與65列5行我得到一個接近700毫秒的延遲。