2013-04-18 19 views
18

Her biri bir ABD devletini temsil eden birçok farklı path nesneden oluşan bir svg öğem var. enter image description hereD3: İç svg yollarını birleştirin mi?

http://jsfiddle.net/jGjZ2/

hiçbir görünür bölünmeler ile tek yolu nesnesine doğu topraklarını (altın) birleştirmek istiyoruz.

Sonuç (yanlışlıklar görmezden) şöyle görünmelidir: Ben D3 kullanıyorum enter image description here

. GeoJSON veya TopoJSON veri yok - harita hvml'ye doğrudan gömülü svg'dir (bkz. Jsfiddle).

Çok teşekkürler!

+0

Eğer bunu çevrimiçi yapmanız gerekmiyorsa, [bu soru] (http://stackoverflow.com/questions/8420653/merging-svg-paths-of-several-neighboring-ustates) yardımcı olacaktır. –

+0

Aynı sorunu yaşadık: http://stackoverflow.com/questions/15473765/merge-two-svg-path-elements-programatically – jantimon

cevap

19

(daha kolay manipüle ... biçimleri içinde kartografik sınırların hazır durumu verilen keyfi bir kısıtlama gibi görünüyor), sen kullanım topojson.mesh birden birleştirmek için olabilir varolan bir SVG resmini manipüle belirtilen kısıtlama yok sayabilirsiniz varsayarsak Çokgenler. Başka basit bir yaklaşım sadece iki kez vurgulanan çokgenler çizmek olduğunu

merged polygons

: rağmen, bu örnekte açıklandığı şekilde bu yaklaşım birkaç sınırlaması vardır not kez kalın siyah inme ve dolgusuz ve portakal dolgusu ve vuruşsuz üstte ikinci kez. Bu topolojik manipülasyon için gerek kalmadan aynı etkiyi:

merging polygons

Eğer gerçekten SVG elemanı içine ulaşmak ve vektör verileri çıkartarak aynı şeyi yapabileceğini olsaydı herhalde, ama olacak temiz verilerden başlarsanız daha kolay olun.

+0

Sadece topojson ile bunu nasıl yapacağını arıyordum - teşekkürler! – nrabinowitz

+0

İkinci yönteminiz gibi bir şey anlamaya çalışıyordum ama hiçbir şey akla gelmedi. Mükemmel! Not; Bu kütüphane ile mükemmel iş. –