5

人力車の素敵なチャート作成フレームワークを使用して、折れ線グラフに遷移を追加しようとしています。私はd3を初めて使用しますが、Rickshaw.Graph.Rendererのrender関数内で直線を追加してからグラフデータに遷移する必要があるようです

私の質問は、私の折れ線グラフにアニメーションを追加するのに役立つものはありますか?おそらく平らな線から移行するか、左から右に線を引くのに役立ちます.

生の d3 の例を見たことがありますが、人力車を適応させるのは難しいようです。

4

1 に答える 1

0

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

コードの最初の部分は、アニメーションなしで単純な線を描画します。

アニメは第2部が舞台。linePathLength を使用して、行の長さを px で取得します。次に、線の始点を定義する stroke-dashoffset を 0 に設定すると、左から右にゆっくりと線を引くことができます。

コードはhttp://datavis.fr/index.php?page=transition (フランス語) にあります。

于 2016-06-15T13:28:13.697 に答える