javascript - D3: 内部 SVG パスをマージしますか?

Question

それぞれが米国の 1 つの州を表す svgさまざまなオブジェクトで構成される要素があります。path

http://jsfiddle.net/jGjZ2/

東の領土 (金) を、目に見える分割のない単一のパス オブジェクトにマージしたいと考えています。

最終結果は次のようになります (不正確さは無視してください)。

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

どうもありがとう！

Answer 1

既存の SVG 画像を操作するという規定の制限を無視できると仮定すると (これは、より操作しやすい形式の地図作成境界がすぐに利用できることを考えると、恣意的な制限のように思えます)、topojson.meshを使用して複数のポリゴンをマージできます。ただし、この例で説明されているように、このアプローチにはいくつかの制限があることに注意してください。

もう 1 つの簡単な方法は、強調表示されたポリゴンを 2 回描画することです。1 回目は太い黒のストロークで塗りつぶしなし、2 回目はその上にオレンジ色の塗りつぶしでストロークなしです。これにより、トポロジー操作を必要とせずに同じ効果が得られます。

本当に必要な場合は、SVG 要素に到達して、ベクター データを抽出することで同じことを行うことができると思いますが、クリーンなデータから始めると、より簡単になります。