21

I have an svg element composed of many different path objects, each of which represents one U.S state. enter image description here

http://jsfiddle.net/jGjZ2/

I would like to merge the east territory (gold) into a single path object with no visible divisions.

The end result should look like this (ignore the inaccuracies): enter image description here

I am using D3. There is no GeoJSON or TopoJSON data - the map is svg directly embedded in html (see jsfiddle).

Thanks a lot!

Mike Furlender
  • 3,869
  • 5
  • 47
  • 75
  • If you don't need to do this online, [this question](http://stackoverflow.com/questions/8420653/merging-svg-paths-of-several-neighboring-us-states) will help. – Lars Kotthoff Apr 18 '13 at 21:09
  • We had the same problem: http://stackoverflow.com/questions/15473765/merge-two-svg-path-elements-programatically – jantimon Apr 18 '13 at 21:45

1 Answers1

22

Assuming you can ignore the stated restriction of manipulating an existing SVG image (which seems like an arbitrary restriction given the ready availability of cartographic boundaries in more easy-to-manipulate formats…), you can use topojson.mesh to merge multiple polygons. Though, note this approach has a few limitations as described in this example:

merged polygons

Another simple approach is to just draw the highlighted polygons twice: once with a thick black stroke and no fill, and a second time on top with orange fill and no stroke. This achieves the same effect without any need for topological manipulation:

merging polygons

I suppose if you really had to, you could reach into the SVG element and do the same thing by extracting the vector data, but it will be easier if you start from clean data.

mbostock
  • 51,423
  • 13
  • 175
  • 129
  • I was just looking for how to do this with topojson - thanks! – nrabinowitz Apr 18 '13 at 22:28
  • I was trying to figure something out like your second method but nothing came to mind. Perfect! P.S. Excellent job with this library. – Mike Furlender Apr 19 '13 at 03:43
  • 1
    Is there a way to achieve the same result with geojson (and not topojson)? My goal is to get a unique centroid for a group of countries selected by the user. – mimau Nov 24 '20 at 17:21