2013-04-18 13 views
18

私は多くの異なるpathオブジェクトで構成されたsvg要素を持っています。それぞれは1つの米国の状態を表します。 enter image description hereD3:内部SVGパスをマージしますか?

http://jsfiddle.net/jGjZ2/

ノー可視部門と単一パスオブジェクトに東領域(金)をマージしたいです。

最終結果は(不正確さを無視する)、次のようになります。 enter image description here

私はD3を使用しています。 GeoJSONまたはTopoJSONデータはありません。マップはhtmlに直接埋め込まれたsvgです(jsfiddleを参照)。

ありがとうございます!

+0

オンラインで行う必要がない場合は、[この質問](http://stackoverflow.com/questions/8420653/merging-svg-paths-of-several-neighboring-us-states)が役立ちます。 –

+0

私たちは同じ問題がありました:http://stackoverflow.com/questions/15473765/merge-two-svg-path-elements-programatically – jantimon

答えて

19

既存のSVG画像(より操作しやすいフォーマットの地図の境界線が用意されているため、任意の制限のように思えます)を操作するという制限を無視すると、topojson.meshを使用すると複数ポリゴン。別の簡単なアプローチは、ちょうどは二回を強調ポリゴンを描画することです

merged polygons

::しかしは、この例で説明したように、このアプローチはいくつかの制限があり注意一度太い黒のストロークと塗りなしで、そして2回目は上にオレンジ色の塗りつぶしとストロークがありません。これは、トポロジカルな操作を必要とせずに同様の効果を得ることができる:

merging polygons

あなたは本当に、あなたはSVG要素に到達し、ベクトルデータを抽出することによって、同じことを行うことができなければならなかった場合、私が思う、それは意志きれいなデータから始める方が簡単です。

+0

私はtopojsonでこれを行う方法を探していました - ありがとう! – nrabinowitz

+0

私はあなたの2番目の方法のようなものを見つけ出そうとしていましたが、何も気にしませんでした。完璧! P.S.このライブラリの優れた仕事。 –