使用線圖和人力車的轉換

Question

我想用Rickshaw的漂亮的製圖框架將轉換添加到線圖中。我是新來的d3，但似乎我需要添加一條直線，然後過渡到Rickshaw渲染函數內的圖形數據。圖形渲染器

我的問題是，有沒有什麼將有助於將一些動畫添加到我的折線圖中 - 可能是從一條平坦線轉換而來 - 或從左至右畫線。

我已經看到了原始d3的例子，但是改編人力車看起來很難 - 或者我從錯誤的角度打它。

Answer 1

由於只有D3（我不知道人力車），我們可以做到這一點下面的代碼：

var linePath = svg.append("path") 
    .datum(data) 
    .attr("d", line) 
    .style("fill", "none") 
    .style("stroke", "#3498db") 
    .style("stroke-width", "1px") 
    .attr("transform", "translate(150, 0)"); 

var linePathLength = linePath.node().getTotalLength(); 
linePath 
    .attr("stroke-dasharray", linePathLength) 
    .attr("stroke-dashoffset", linePathLength) 
    .transition() 
     .duration(4000) 
     .ease("linear") 
     .attr("stroke-dashoffset", 0); 

代碼的第一部分畫一條簡單的直線，沒有動畫。

動畫在第二部分中設置。 使用linePathLength我們可以得到px中行的長度。 然後將定義線條起點的stroke-dashoffset設置爲0，這使我們可以從左至右緩慢地繪製線條。

代碼已在這裏找到http://datavis.fr/index.php?page=transition（法國人雖然）。