I am creating a tweening web map that switches between different configurations of borders within a map. I'm using d3.JS to do this - here's an example of where I'm going http://jsfiddle.net/cormundo/91pjd3z4/40/. I'm planning on adding some other static sections of svg as well as tweening segments.
I've created a few configuration of Line data (not polygons, as I'm thinking this might be easier to work with) within Arcmap, and I've exported those to SVG's. When I looked at the SVG's closely I realized that they consist of a lot of different segments, each of which is contained within a different path element in the svg. This of course makes working with these in d3.js quite messy, so I'm trying to combine as many of them into single segments as possible.
Example segment ->
<path xmlns="http://www.w3.org/2000/svg" clip-path="url(#SVG_CP_1)" fill="none" stroke="#A16600" stroke-width="0.95997" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" d=" M236.87355,455.7626L238.79349,455.7626"/>
I've tried dissolving the attribute tables together in each layer in arcmap - the multitude of line segments are still there. I moved this over to illustrator, and within illustrator I'm trying to use the "join path" tool to combine the different segments into one larger line. I'm generally getting two types of errors there I'm not understanding -
[With just a few lines]: "To join, you must select two different endpoints of the same or two different paths"
[If I select a whole layer of lines] "The selected objects cannot be joined as they are invalid objects (compound paths, closed paths, text objects, graphs, live paint group). You can use join command to connect two or more paths, paths in groups; or to close an open path."
So, what I am asking is:
1) Is there an easy fix for this in illustrator or ArcMap?
2) Is there a better way of doing this?