SVG linearGradient를 경로를 따르도록하십시오

저는 메인에서 샌디에고 (미국 전역을 여행하는 세일즈맨 알고리즘을 사용하여 각 카운티마다 생성)를 통해 미국을 가로 지르는 경로가있는지도를 가지고 있습니다. 3000 개 세그먼트 군 사이의 각각의 경로에 대해 하나의 드로잉 및 색을 결정하는 간단한 색상 눈금을 사용하여 9-하여SVG linearGradient를 경로를 따르도록하십시오

상기 생성 하였다까지 경로는 다음처럼 진행되고 point 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);

하지만 경로상의 모든 정류장에서 하나의 긴 경로를 만드는 것이 훨씬 더 효과적입니다. 내가이 줄을 색하기 위해 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은 경로의 진행을 나타냅니다.

출처

2017-12-19 Chris Wilson

링크 된 예는 선형 그래디언트입니다. 당신이 원하는 것은 불가능합니다. 별도의 세그먼트로 당신이했던 것처럼하십시오. https://bl.ocks.org/mbostock/4163057 –

이것은 SVG가 아닌 캔버스에서해야 할 일처럼 보입니다. –

감사합니다. SVG vs. Canvas는 항상 어려운 결정이지만 D3에서이 작업을 수행하는 것이 훨씬 쉽습니다. 나는 모바일 최적화를 마쳤지 만 매 10 번째 정거장을 앞두고 건너 뜁니다. http://time.com/5072619/santa-tracker-christmas-eve/ –

가변 스트로크 대시 어레이 및 필터를 사용하여 경로를 따라 그라디언트를 해킹하는 방법이 있지만 비교적 짧은 세그먼트에 대해서만 실용적입니다 (물론 그러한 경우에도 실용적이지는 않습니다). 개별 경로 세그먼트 &을 별도로 사용해야합니다.

출처

2017-12-20 02:39:36

SVG linearGradient를 경로를 따르도록하십시오

답변

관련 문제