다른 SVG 요소 아래 부분적으로 오는 SVG 요소

d3.js 및 geojson 파일을 사용하여지도를 그립니다. 지도가 제대로 생성되고 해당 국가의 각 지구에 대한 경로가 많은지도가 그려집니다. 지도의 확대/축소 및 이동과 같은 변형을 적용하고 싶기 때문에 도시의 긴, 위도를 사용하여 투영 된 지점에서 원을 그리는 중입니다.다른 SVG 요소 아래 부분적으로 오는 SVG 요소

문제는 부분적으로 원이 경로 아래에 오는 것입니다.

다음은 HTML 페이지의 레이아웃입니다. g 태그에 원을 넣은 이유는지도에 확대/축소 및 팬을 적용하고 그에 따라 원도 이동해야하기 때문입니다.

svg 
    g 
    path d=..... 
    circle...some attributes 
    g 
    path 
    circle 
    g 
    path 
    g 
    path 
    g 
    path 
    circle

어떻게 해결할 수 있습니까? 아니면 다른 해결책이 있습니까?

출처

2013-12-13 user3074097

레이아웃에서 각 영역의 경로는 원 앞에 그려지지만 이전 영역의 원은 나중에 그려진 경로로 숨길 수 있습니다. 겹침을 피하기 위해 경로에 대한 그룹을 만들고 원에 대한 그룹을 추가하고 레이블에 대한 그룹을 추가 할 수 있습니다.

- g.zoom 
    - g.paths 
     - path 
     - path 
     - ... 
    - g.circles 
     - circle 
     - ... 
    - g.labels 
     - text...

g.zoom 그룹에 확대/축소 동작을 바인딩 할 수 있습니다. 안부,

출처

2013-12-13 12:30:27

이것이 내가하고있는 일입니다. 먼저지도를 만들고, 일단 렌더링하면 원을 그립니다. 그러나 문제는 여전히 발생합니다. – user3074097

SVG의 구조는 다른 말로 설명합니다. 요소는 렌더링 순서를 따르지 않고 SVG 구조에 그대로 표시됩니다. 예를 들어 두 번째 그룹의 경로는 먼저 렌더링 된 것과 관계없이 첫 번째 그룹의 원 위에 그려집니다. –

@ Pablo ... 하나 더. 마우스를 움직이면 원의 반경이 증가하는 원에 마우스를 올려 놓는 동작을 원합니다. 그 위에 마우스를 올려 놓으면 서로 가깝게있는 원에 대해 이전에 그린 그림은 새로운 반경으로 이동되었지만 다른 원 아래로 이동합니다. 마우스를 움직일 때 특정 원이 HTML 페이지의 위치와 관계없이 항상 다른 원 위에 있어야합니다. – user3074097

다른 SVG 요소 아래 부분적으로 오는 SVG 요소

답변

관련 문제