スムーズに流れるようにsvgパスを取得しようとしています

Question

私はフローアニメーションSVGパスでSVGに取り組んでいます。このSVG実装は、別の参照SVG実装に基づいています。私の問題は、参照実装の行がいつまでも滑らかに流れることです。しかし、私の実装は、流通過程において微妙ではあるが目立つような問題に直面するように見える。ここでは、元implmentationだ：

https://jsbin.com/hodoseb/edit?html,output

ここに私のコードは次のとおりです。

https://jsbin.com/jitufih/edit?html,output

ここに私のSVGです：

https://www.dropbox.com/s/kfroff5fyidd0ay/map-path-1213.svg?dl=0

私のバージョンは、その流れでしゃっくりを持っている理由を任意のアイデアは、アニメーション？

Answer 1

破線のパスNortheastSoutheastFlowがflowline CSSクラス 'stroke-dasharray'の属性を上書きしています。したがって、10,4を使用する代わりに、12,4（あなたのSVGでstroke-dasharray="12,4"を検索）を使用します。

return d3.interpolate(0, 16); 

その変更に伴い、：したがって、あなたはanimateThis機能に0から16までアニメーション化するために補間されるべきであることは、各ラインダッシュを引き起こし、の長さを有するようにした後、それは宇宙だ、ではない14。アニメーションはスムーズです。あるいは、元の実装と同様に、SVGのstroke-dasharray属性を10,4に変更するだけで済みます。 flowline CSSクラスは無視されています（SVGで参照されていないため）。