This demonstrates using topojson.merge, a feature that will be released in TopoJSON 1.6, to merge multiple polygons into a single polygon whilst removing interior borders.
(An alternative approach is to draw the polygons twice.)
This example is in response to a Stack Overflow question.
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style> | |
| .state { | |
| fill: #ccc; | |
| } | |
| .state-boundary { | |
| fill: none; | |
| stroke: #fff; | |
| } | |
| .state.selected { | |
| fill: orange; | |
| stroke: #000; | |
| } | |
| </style> | |
| <body> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| <script src="topojson.min.js"></script> | |
| <script> | |
| var width = 960, | |
| height = 600; | |
| var projection = d3.geo.albersUsa() | |
| .scale(1280) | |
| .translate([width / 2, height / 2]); | |
| var path = d3.geo.path() | |
| .projection(projection); | |
| var svg = d3.select("body").append("svg") | |
| .attr("width", width) | |
| .attr("height", height); | |
| var selected = { | |
| "9": 1, "10": 1, "12": 1, "13": 1, "19": 1, "17": 1, "18": 1 | |
| }; | |
| d3.json("/mbostock/raw/4090846/us.json", function(error, us) { | |
| svg.append("path") | |
| .datum(topojson.feature(us, us.objects.states)) | |
| .attr("class", "state") | |
| .attr("d", path); | |
| svg.append("path") | |
| .datum(topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; })) | |
| .attr("class", "state-boundary") | |
| .attr("d", path); | |
| svg.append("path") | |
| .datum(topojson.merge(us, us.objects.states.geometries.filter(function(d) { return d.id in selected; }))) | |
| .attr("class", "state selected") | |
| .attr("d", path); | |
| }); | |
| d3.select(self.frameElement).style("height", height + "px"); | |
| </script> |
| !function(){function n(n,t){function r(t){var r,e=n.arcs[0>t?~t:t],o=e[0];return n.transform?(r=[0,0],e.forEach(function(n){r[0]+=n[0],r[1]+=n[1]})):r=e[e.length-1],0>t?[r,o]:[o,r]}function e(n,t){for(var r in n){var e=n[r];delete t[e.start],delete e.start,delete e.end,e.forEach(function(n){o[0>n?~n:n]=1}),a.push(e)}}var o={},i={},u={},a=[],c=-1;return t.forEach(function(r,e){var o,i=n.arcs[0>r?~r:r];i.length<3&&!i[1][0]&&!i[1][1]&&(o=t[++c],t[c]=r,t[e]=o)}),t.forEach(function(n){var t,e,o=r(n),a=o[0],c=o[1];if(t=u[a])if(delete u[t.end],t.push(n),t.end=c,e=i[c]){delete i[e.start];var f=e===t?t:t.concat(e);i[f.start=t.start]=u[f.end=e.end]=f}else i[t.start]=u[t.end]=t;else if(t=i[c])if(delete i[t.start],t.unshift(n),t.start=a,e=u[a]){delete u[e.end];var s=e===t?t:e.concat(t);i[s.start=e.start]=u[s.end=t.end]=s}else i[t.start]=u[t.end]=t;else t=[n],i[t.start=a]=u[t.end=c]=t}),e(u,i),e(i,u),t.forEach(function(n){o[0>n?~n:n]||a.push([n])}),a}function t(t,r,e){function o(n){var t=0>n?~n:n;(s[t]||(s[t]=[])).push({i:n,g:f})}function i(n){n.forEach(o)}function u(n){n.forEach(i)}function a(n){"GeometryCollection"===n.type?n.geometries.forEach(a):n.type in l&&(f=n,l[n.type](n.arcs))}var c=[];if(arguments.length>1){var f,s=[],l={LineString:i,MultiLineString:u,Polygon:u,MultiPolygon:function(n){n.forEach(u)}};a(r),s.forEach(arguments.length<3?function(n){c.push(n[0].i)}:function(n){e(n[0].g,n[n.length-1].g)&&c.push(n[0].i)})}else for(var h=0,p=t.arcs.length;p>h;++h)c.push(h);return{type:"MultiLineString",arcs:n(t,c)}}function r(t,r){function e(n){n.forEach(function(t){t.forEach(function(t){(o[t=0>t?~t:t]||(o[t]=[])).push(n)})}),i.push(n)}var o={},i=[],u=[];return r.forEach(function(n){"Polygon"===n.type?e(n.arcs):"MultiPolygon"===n.type&&n.arcs.forEach(e)}),i.forEach(function(n){if(!n._){var t=[],r=[n];for(n._=1,u.push(t);n=r.pop();)t.push(n),n.forEach(function(n){n.forEach(function(n){o[0>n?~n:n].forEach(function(n){n._||(n._=1,r.push(n))})})})}}),i.forEach(function(n){delete n._}),{type:"MultiPolygon",arcs:u.map(function(r){var e=[];return r.forEach(function(n){n.forEach(function(n){n.forEach(function(n){o[0>n?~n:n].length<2&&e.push(n)})})}),n(t,e)})}}function e(n,t){return"GeometryCollection"===t.type?{type:"FeatureCollection",features:t.geometries.map(function(t){return o(n,t)})}:o(n,t)}function o(n,t){var r={type:"Feature",id:t.id,properties:t.properties||{},geometry:i(n,t)};return null==t.id&&delete r.id,r}function i(n,t){function r(n,t){t.length&&t.pop();for(var r,e=s[0>n?~n:n],o=0,i=e.length;i>o;++o)t.push(r=e[o].slice()),f(r,o);0>n&&u(t,i)}function e(n){return n=n.slice(),f(n,0),n}function o(n){for(var t=[],e=0,o=n.length;o>e;++e)r(n[e],t);return t.length<2&&t.push(t[0].slice()),t}function i(n){for(var t=o(n);t.length<4;)t.push(t[0].slice());return t}function a(n){return n.map(i)}function c(n){var t=n.type;return"GeometryCollection"===t?{type:t,geometries:n.geometries.map(c)}:t in l?{type:t,coordinates:l[t](n)}:null}var f=p(n.transform),s=n.arcs,l={Point:function(n){return e(n.coordinates)},MultiPoint:function(n){return n.coordinates.map(e)},LineString:function(n){return o(n.arcs)},MultiLineString:function(n){return n.arcs.map(o)},Polygon:function(n){return a(n.arcs)},MultiPolygon:function(n){return n.arcs.map(a)}};return c(t)}function u(n,t){for(var r,e=n.length,o=e-t;o<--e;)r=n[o],n[o++]=n[e],n[e]=r}function a(n,t){for(var r=0,e=n.length;e>r;){var o=r+e>>>1;n[o]<t?r=o+1:e=o}return r}function c(n){function t(n,t){n.forEach(function(n){0>n&&(n=~n);var r=o[n];r?r.push(t):o[n]=[t]})}function r(n,r){n.forEach(function(n){t(n,r)})}function e(n,t){"GeometryCollection"===n.type?n.geometries.forEach(function(n){e(n,t)}):n.type in u&&u[n.type](n.arcs,t)}var o={},i=n.map(function(){return[]}),u={LineString:t,MultiLineString:r,Polygon:r,MultiPolygon:function(n,t){n.forEach(function(n){r(n,t)})}};n.forEach(e);for(var c in o)for(var f=o[c],s=f.length,l=0;s>l;++l)for(var h=l+1;s>h;++h){var p,g=f[l],v=f[h];(p=i[g])[c=a(p,v)]!==v&&p.splice(c,0,v),(p=i[v])[c=a(p,g)]!==g&&p.splice(c,0,g)}return i}function f(n,t){function r(n){u.remove(n),n[1][2]=t(n),u.push(n)}var e,o=p(n.transform),i=g(n.transform),u=h(l),a=0;for(t||(t=s),n.arcs.forEach(function(n){var r=[];n.forEach(o);for(var i=1,a=n.length-1;a>i;++i)e=n.slice(i-1,i+2),e[1][2]=t(e),r.push(e),u.push(e);n[0][2]=n[a][2]=1/0;for(var i=0,a=r.length;a>i;++i)e=r[i],e.previous=r[i-1],e.next=r[i+1]});e=u.pop();){var c=e.previous,f=e.next;e[1][2]<a?e[1][2]=a:a=e[1][2],c&&(c.next=f,c[2]=e[2],r(c)),f&&(f.previous=c,f[0]=e[0],r(f))}return n.arcs.forEach(function(n){n.forEach(i)}),n}function s(n){return Math.abs((n[0][0]-n[2][0])*(n[1][1]-n[0][1])-(n[0][0]-n[1][0])*(n[2][1]-n[0][1]))}function l(n,t){return n[1][2]-t[1][2]}function h(n){function t(t){for(var r=o[t];t>0;){var e=(t+1>>1)-1,i=o[e];if(n(r,i)>=0)break;o[i.index=t]=i,o[r.index=t=e]=r}}function r(t){for(var r=o[t];;){var e=t+1<<1,i=e-1,u=t,a=o[u];if(i<o.length&&n(o[i],a)<0&&(a=o[u=i]),e<o.length&&n(o[e],a)<0&&(a=o[u=e]),u===t)break;o[a.index=t]=a,o[r.index=t=u]=r}}var e={},o=[];return e.push=function(){for(var n=0,r=arguments.length;r>n;++n){var e=arguments[n];t(e.index=o.push(e)-1)}return o.length},e.pop=function(){var n=o[0],t=o.pop();return o.length&&(o[t.index=0]=t,r(0)),n},e.remove=function(e){var i=e.index,u=o.pop();return i!==o.length&&(o[u.index=i]=u,(n(u,e)<0?t:r)(i)),i},e}function p(n){if(!n)return v;var t,r,e=n.scale[0],o=n.scale[1],i=n.translate[0],u=n.translate[1];return function(n,a){a||(t=r=0),n[0]=(t+=n[0])*e+i,n[1]=(r+=n[1])*o+u}}function g(n){if(!n)return v;var t,r,e=n.scale[0],o=n.scale[1],i=n.translate[0],u=n.translate[1];return function(n,a){a||(t=r=0);var c=0|(n[0]-i)/e,f=0|(n[1]-u)/o;n[0]=c-t,n[1]=f-r,t=c,r=f}}function v(){}var d={version:"1.6.0",mesh:function(n){return i(n,t.apply(this,arguments))},meshArcs:t,merge:function(n){return i(n,r.apply(this,arguments))},mergeArcs:r,feature:e,neighbors:c,presimplify:f};"function"==typeof define&&define.amd?define(d):"object"==typeof module&&module.exports?module.exports=d:this.topojson=d}(); |
