Machen Sie eine SVG linearGradient folgen Sie dem Pfad

Question

Ich habe eine Karte einer Umweg durch die USA von Maine nach San Diego (generiert mit einem Traveling Salesman-Algorithmus für jeden Landkreis), und ich möchte es von rot bis blau, wie weit entlang dem Weg fortgeschritten ist, etwa so:

die oben wurde durch Ziehen 3,000 Segmente erzeugt, einen für jeden Pfad zwischen Landkreisen, und unter Verwendung einer einfachen Farbskala, die Farbe zu bestimmen, unter Verwendung eines 9- Punkt ColorBrewer Spektralskala:

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

Aber es wäre viel leistungsfähiger, aus jedem Halt auf der Strecke einen langen Weg zu machen. Aber wenn ich ein linearGradient mit 9 Stationen machen diese Linie zu färben, ist es nicht richtig aussehen:

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

Es ist ziemlich offensichtlich, dass der Gradient nur auf den Pfad angewendet wird, die gleiche Art und Weise wäre es ein rect, mit der ersten Farbe oben links bis zur letzten Farbe unten rechts. Ich brauche die Farbe, die basierend auf dem Punkt auf dem Pfad berechnet wird, nicht die Position auf der Karte.

Irgendwie scheint this example zu tun, was ich brauche, aber es kann nur die Art der Probe sein, die es so erscheinen lässt. Ich habe this gist gefunden, das empfiehlt, den Pfad in regelmäßigen Abständen abzufragen, aber ich glaube, das bringt mich einfach dahin zurück, wo ich angefangen habe.

Die ursprüngliche Lösung ist nicht schrecklich, aber es ist sehr schwer auf dem Prozessor im Vergleich zu einem einzigen Pfad, insbesondere auf dem Handy.

Können Farbverläufe einem Pfad von Anfang bis Ende folgen, sodass sich der stop auf den Fortschritt auf dem Pfad bezieht?

Answer 1

Es gibt eine Möglichkeit, Gradienten entlang eines Pfades mit variablen Strichen und einem Filter zu hacken, aber das ist nur praktisch für relativ kurze Segmente (und vielleicht nicht so praktisch für diese.) Für einen so langen Pfad müssen separate Pfadsegmente & verwenden, um sie separat zu färben.