D3.jsアニメーションを入力

Question

ちょっと質問があります：

どのようにして、解析されたときに線やパスを描画するのですか？私はそれが突然現れたくないのですが、トランジション（）や関連するアニメーションエフェクトを持っているので、あなたが描いているようにスムーズに表示されます。あらかじめx軸から上へ、上から下へと始まっても大丈夫です。いずれにしても簡単です。

私の.attr引数の順序によっては、パスが表示され、遷移しない、またはdevツールが私のパスが関数ではないと言います。ここで私が働いているものです：問題を入力の上、アニメーションは別に

var max_line = d3.svg.line() 
    .x(function(d) { return scale(d.local_max); }) 
    .y(function(d) { return yscale(d.Y); });  

svg.append('path') 
    .attr('transform', 'translate(' +(margins.left)+','+margins.top+')') 
    .attr('fill', 'none') 
    .attr('stroke', 'white') 
    .style('stroke-width', '4px') 
    .style('stroke-dasharray', '5,3') 
    .transition() 
    .datum(data) 
    .duration(3000) 
    .attr('d', max_line); 

、私のストロークダッシュアレイは適用されませんなぜ私に言うことができる誰のためのボーナスポイント。それはいつも退屈な実線として現れます。

私の質問は、stroke-dasharrayと組み合わせてアニメーションを入力するのが簡単ではないため、これまでの質問と異なる場合があります。

Answer 1

ファーストは、このようにパスを作る：

var path = svg.append("path") 
     .attr("d", max_line) 
     .attr('fill', 'none') 
     .attr('stroke', 'white') 
     .style('stroke-width', '4px') 
     .attr("fill", "none"); 

は、パスの長さの合計を取得：

var totalLength = path.node().getTotalLength(); 

は今totallengthを使用してストロークdasharrayを作る（ラインがでないように行われ見える）。下のスニペットに示すように、後でstroke-dashoffsetを全長から0に移行します。

path 
    .attr("stroke-dasharray", totalLength + " " + totalLength) 
    .attr("stroke-dashoffset", totalLength) 
    .transition() 
    .duration(2000) 
    .ease("linear") 
    .attr("stroke-dashoffset", 0);