折れ線グラフとRickshawを使用した遷移

Question

Rickshawの優れたチャートフレームワークを使用して線グラフに遷移を追加しようとしています。私はd3の初心者ですが、直線を追加して、Rickshaw.Graph.Rendererのレンダリング関数内のグラフデータに移動する必要があるように思われます。

私の質問は、そこに何かありますか？折れ線グラフにアニメーションを追加するのに役立ちます（おそらく、フラットラインからの移行、または左から右への線の描画）。

生のd3の例を見たことがありますが、適応型人力車は難しいようです。あるいは、間違った角度から突っ込んでくるかもしれません。のみD3（私は人力車のことは知らない）で

Answer 1

、我々は次のコードでそれを行うことができます。

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

コードの最初の部分は、アニメーションせずに、シンプルな線を引きます。

2番目の部分にアニメーションが設定されています。 linePathLengthでは、行の長さをpxで取得します。 ラインの開始点を定義するストロークダッシュオフセットは0に設定されており、ゆっくりとラインを左から右に描画できます。

コードはhttp://datavis.fr/index.php?page=transition（フランス語ですが）で見つかりました。