私は棒グラフ上に線を描画するには、次のコードを使用してい

Question

ライン「以下の」SVGラインがアニメーションとして表示させます[{x: 0, y: whatever}, {x: 0.5, y: another-y-value}, ...]という形式の別の配列、つまり行を通過する点の集合です。私がしたいのは、描かれているかのようにラインを表示することです。つまり、ラインを瞬時に表示する代わりに、最初のポイントから2番目のポイントまで視覚的に拡張したいと思います。これは、現在（yにxを任意の関数マッピングのために）次のようになります。これを達成する

Answer 1

[ダブル答えのため申し訳ありませんが、この1は@RobertLongsonに入金される]

stroke-dasharrayhereを使用して非常に素晴らしい例があります。以下を追加し、.call(transition)をパスに追加してください。

function transition(path) { 
    path.transition() 
    .duration(7500) 
    .attrTween("stroke-dasharray", tweenDash) 
    .each("end", function() { d3.select(this).call(transition); }); 
} 

function tweenDash() { 
    var l = this.getTotalLength(), 
     i = d3.interpolateString("0," + l, l + "," + l); 
    return function(t) { return i(t); }; 
} 

Answer 2

一つの方法は、clipに幅が滑らかに遷移0から最大まで長方形のラインであります幅。あなたの<svg>に以下を追加しますhttp://jsfiddle.net/pLL30tcz/2/

を参照してください。そして、

<defs> 
    <clipPath id="clipPath"> 
     <rect x="0" y="0" width="0" height="400" /> 
    </clipPath> 
</defs> 

あなたのパス要素に.style("clip-path","url(#clipPath)")を使用して行をクリップ。最後に、描画効果は次のようにして達成できます。

d3.select("#clipPath rect") 
    .attr("width", "0") 
    .transition() 
    .duration(4000) 
    .attr("width","400") 

必要に応じて座標を調整するだけで済みます。唯一の欠点は、速度がラインに沿って均一ではなく、x軸に沿ってのみであることで、パスのほぼ水平な部分とほぼ垂直な部分の間に差が見えることです。