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

/

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):

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

Thanks a lot!

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

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):

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

Thanks a lot!

• javascript
• svg
• d3.js

• If you don't need to do this online, this question will help. – Lars Kotthoff Commented Apr 18, 2013 at 21:09
• We had the same problem: stackoverflow.com/questions/15473765/… – jantimon Commented Apr 18, 2013 at 21:45

1 Answer 1

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:

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:

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.