SVG linearGradientをパスに従うようにする

Question

私は、メイン州からサンディエゴへの米国を通る迂回路の地図を持っています（各郡のトラベリングセールスマンアルゴリズムを使って生成されます）。

上記9-を用いて、3,000セグメント、郡との間の各パスのいずれかを描画し、色を決定するために、単純なカラースケールを用いて生成した：これは同じ経路が、進行した遥かに沿ってポイントColorBrewerスペクトルスケール：

var colors = ["#D53E4F", "#F46D43", "#FDAE61", "#FEE08B", "#FFFFBF", "#E6F598", "#ABDDA4", "#66C2A5", "#3288BD"]; 
var markers = d3.range(0, route.length, Math.floor(route.length/(colors.length - 1))); 
var color_scale = d3.scaleLinear().range(colors).domain(markers); 

しかし、ルート上のすべての停留所から1つの長い道を作る方がより効果的です。私はこの行を着色するlinearGradient 9と停止を行うときしかし、それは正しく見えません。

var defs = svg.append("defs"); 

var gradient = defs.append("linearGradient") 
    .attr("id", "svgGradient") 
    .attr("x1", "0%") 
    .attr("x2", "100%") 
    .attr("y1", "0%") 
    .attr("y2", "100%"); 

var interval = 12.5; 

colors.reverse().forEach((d, i) => { 
    gradient.append("stop") 
     .attr('class', 'start') 
     .attr("offset", i * interval + "%") 
     .attr("stop-color", d) 
     .attr("stop-opacity", 1);   
}); 

それはパスに同じように勾配がちょうど適用されていることは明らかだことだろうrectで、最初の色が左上に、最後の色が右下になります。地図上の位置ではなく、経路に沿ったポイントに基づいて計算する色が必要です。

どういうわけか、this exampleが私の必要とするように思われますが、そのように見えるサンプルの性質かもしれません。私はthis gistが定期的にパスをサンプリングすることを推奨していることが分かったが、私が始めたところに戻ってくると思う。

オリジナルの解決策はひどいわけではありませんが、携帯電話を中心とした単一の経路と比較して、プロセッサは非常に重いです。

グラジエントは、最初から最後までパスをたどることができるので、パスに沿った進捗状況を参照することができます。stop

Answer 1

可変ストロークダッシュアレイとフィルタを使用して、パスに沿ってグラデーションをハッキングする方法がありますが、比較的短いセグメントには実用的です（そして、それらのものでさえ実用的ではありません）。個別のパスセグメント&を個別に使用する必要があります。