D3: Merge interior svg paths?

21
votes

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!

1
javascriptsvgd3.js
If you don't need to do this online, this question will help. – Lars Kotthoff
We had the same problem: stackoverflow.com/questions/15473765/… – jantimon

1 Answers

21
votes

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.