2013-04-18 10 views
18

Mam element svg złożony z wielu różnych obiektów path, z których każdy reprezentuje jeden stan U.S. enter image description hereD3: Scalanie wewnętrznych ścieżek svg?

http://jsfiddle.net/jGjZ2/

Chciałbym połączyć obszar wschodni (złoto) w jeden obiekt ścieżki bez widocznych podziałów.

Efekt końcowy powinien wyglądać tak (ignorowanie nieścisłości): enter image description here

Używam D3. Brak danych GeoJSON lub TopoJSON - mapa jest svg bezpośrednio osadzona w html (patrz jsfiddle).

Wielkie dzięki!

+0

Jeśli nie musisz tego robić online, [to pytanie] (http://stackoverflow.com/questions/8420653/merging-svg-paths-of-several-sighboring-us-states) pomoże. –

+0

Mieliśmy ten sam problem: http://stackoverflow.com/questions/15473765/merge-two-svg-path-elements-programatically – jantimon

Odpowiedz

19

Zakładając można zignorować podaną ograniczenie manipulacji istniejący obraz SVG (co wydaje się arbitralne ograniczenia ze względu na łatwą dostępność granic kartograficznych w bardziej łatwe do manipulowania formaty ...), można użycie topojson.mesh do łączenia wielu wielokąty. Choć należy pamiętać, to podejście ma kilka ograniczeń, jak to opisano w poniższym przykładzie:

merged polygons

Innym prostym rozwiązaniem jest po prostu narysować podświetlone wielokątów dwukrotnie: raz z grubym czarnym udarem i bez wypełnienia, a po raz drugi na wierzch z pomarańczowym wypełnieniem i bez obrysu. To daje ten sam efekt bez konieczności manipulowania topologicznej:

merging polygons

Przypuszczam, że jeśli naprawdę musiał, można dotrzeć do elementu SVG i zrobić to samo przez ekstrakcję danych wektorowych, ale będzie być łatwiejszym, jeśli zaczniesz od czystych danych.

+0

Po prostu szukałem, jak to zrobić z topojson - dzięki! – nrabinowitz

+0

Próbowałem zrozumieć coś jak twoją drugą metodę, ale nic nie przychodziło mi do głowy. Idealny! P.S. Doskonała praca z tą biblioteką. –

Powiązane problemy