d3.js 및 google maps API가있는 다중 경로

Question

Google Maps API를 사용하여 GeoJSON 데이터로 정의 된 일부 경로의 오버레이를 추가하려고합니다. this thread의 예제를 사용하여 시작했는데 두 데이터 경로를 사용하기 전까지 데이터가 정상적으로 작동했습니다. 경로를 다른 색상으로 렌더링해야하므로 데이터 세트를 결합 할 수 없습니다.

모든 경로가 완전히 렌더링되지 않는 문제가 발생했습니다. 빨간색 경로가 렌더링 알 수 있지만, 녹색 경로가 나타 결코 -

http://jsfiddle.net/HWxKu/ :

path2 = d3.geo.path().projection(googleMapProjection); 
path4 = d3.geo.path().projection(googleMapProjection); 

svg.selectAll("path") 
    .data(line2_geoJson.features) 
    .attr("d", path2) // update existing paths 
    .attr("stroke", "red") 
    .enter().append("svg:path"); 
svg.selectAll("path") 
    .data(line4_geoJson.features) 
    .attr("d", path4) // update existing paths 
    .attr("stroke", "green") 
    .enter().append("svg:path"); 

은 몇 가지 예를 표시하려면 : 여기에 내가 시도하고있는 무슨의 요점이다. (조금 확대하십시오.)

http://jsfiddle.net/X644x/ - 유일한 차이점은 두 개의 svg.selectAll 문 순서를 바꿨습니다. 녹색 경로는 주로 렌더링되고 약간 확대 한 후에 빨간색 경로의 비트가 렌더링됩니다.

아무도 무슨 일이 일어 났는지 설명 할 수 있습니까? 내 생각에 Google Maps API가 오버레이 (일종의 타임 아웃)에 어떤 종류의 한계를 부과하고 있습니까? 아니면 여기서 비동기적인 것이 있습니까? 나는 d3에 초보자이므로 어떤 설명도 크게 감사하겠습니다.

Answer 1

enter() 선택을 잘못 사용했습니다. "d"와 "획"을 설정하는 첫 번째 문 집합은 아직 경로가 없기 때문에 전혀 수행하지 않습니다. 새로운 요소를 추가 한 후에 이들을 넣어야합니다.

두 번째 문제는 두 번째 문에서 첫 번째 경로를 덮어 쓰는 것입니다. 기본적으로 D3은 배열 인덱스에 의해 기존 데이터와 새로운 데이터를 일치시킵니다. 즉, 첫 번째 새 기능이 첫 번째 기존 경로와 일치되는 식으로 진행됩니다. D3에 일치시키는 방법을 알려주는 함수를 제공해야합니다.

원하는 코드는 다음과 같습니다.

svg.selectAll("path") 
    .data(line2_geoJson.features, function(d) { return d.properties.route_id; }) 
    .enter().append("path") 
    .attr("d", path2) 
    .attr("stroke", "red"); 

svg.selectAll("path") 
    .data(line4_geoJson.features, function(d) { return d.properties.route_id; }) 
    .enter().append("path") 
    .attr("d", path4) 
    .attr("stroke", "green");