d3.js의 SVG 요소를 클러스터링하면 예기치 않은 결과가 발생합니다.

그래서 d3.js, polymaps 및 Coffeescript를 사용하는 프로젝트에 대해 일부 맵 마커 클러스터링을 수행하려고합니다. d3.js의 SVG 요소를 클러스터링하면 예기치 않은 결과가 발생합니다.

저는 기본 데이터에 기초하여 상기 클러스터를 계산하고 .DATA (클러스터)로서 D3에

클러스터의 위치 확인을 보인다 클러스터 배열을 전달한다. 초기 확대/축소 수준에서의 클러스터링은 괜찮은 것으로 보이고 내 지식에 기반하여 100 % 정확합니다. 확대/축소 수준을 변경하면 모든 것이 한 눈에 잘 보이지만 서클 위로 마우스를 가져 가면 설명이 현재 위치와 일치하지 않는 것처럼 보입니다. 경로가 이전 위치와 일치하지 않는 것 같습니다. 지금이다.

전체 코드가 포함 된 http://bl.ocks.org/3161013에 예제를 작성했습니다.

클러스터링과 SVG 업데이트의 두 가지 주요 실패 지점이 있습니다.

클러스터링을위한 코드는 매우 간단하며 Mark Tuupola의 코드를 기반으로하지만 php 대신 coffeescript를 사용합니다.

cluster: (elements, distance) -> 
    currentElements = elements.slice(0) 
    pixelDistance = @pixelDistance() 
    distLat = distance * pixelDistance.lat 
    distLon = distance * pixelDistance.lon 

    clustered = [] 
    while currentElements.length > 0 
     stop = currentElements.shift() 

     cluster = [] 
     cluster.push stop 

     i = 0 
     while i < currentElements.length 
     if Math.abs(currentElements[i].lat - stop.lat) < distLat and Math.abs(currentElements[i].lon - stop.lon) < distLon 
      aStop = currentElements.splice i,1 
      cluster.push aStop[0] 
      i-- 
     i++ 
     clustered.push cluster 
    clustered

SVG 업데이트 코드는 상당히 직설적 인 d3 코드처럼 보입니다. 지도가 이동하면이 업데이트 메서드가 호출됩니다. 확대/축소가 변경되거나 미리 클러스터링 된 데이터가 변경된 경우에는 다시 클러스터하고 레이아웃합니다. 그렇지 않으면 기존 포인트를 변환합니다.

내가 여기에 놓치기 쉬운 것이있을 것 같은 느낌이 들지만, 나는 아직 상당히 d3에 익숙합니다.

출처

2012-07-22 Jamie Starke

데이터가 변경되면 기존 마커의 'circle'요소가 업데이트되지 않습니다. d3은 새 요소가 추가 (입력), 제거 (종료) 또는 업데이트 (기본값)되는지 여부를 파악하기 위해 기본값 당 인덱스를 사용합니다. 이로 인해 해당 확대/축소 수준에 이미 있던 모든 요소의 텍스트가 이전 확대/축소 수준의 텍스트가됩니다.

그것은 다음 코드를 사용하여 작동합니다 :

marker = @selector.selectAll("g").data(@clusters) 

# update existing 'g' elements 
marker.select('circle') 
.attr('r', your_cluster_size_function) 
.attr("text", your_text_function) 


# add new 'g' elements 
marker.enter().append("g") 
.append("circle") 
.attr("class", "stop no-tip") 
.attr('r', your_cluster_size_function) 
.attr("text", your_text_function) 

# remove 'g' elements if there are too many 
marker.exit().remove()

출처

2012-07-24 05:33:29

d3.js의 SVG 요소를 클러스터링하면 예기치 않은 결과가 발생합니다.

답변

관련 문제