CODEWITHSUNDEEP
javascriptd3.jstopojson
Bellice
Bellice

Reputation: 322

d3js v5 + Topojson v3 Map with border rendering

I come back for a problem. I'm still learning d3js for 5 days and I have a problem about the border rendering. Why I have that ? france country

The problem occurs when I add region borders.

svgMap.append("path")
  .attr("class", "reg_contour")
  .datum(topojson.mesh(fr[0], fr[0].objects.reg_GEN_WGS84_UTF8, function(a, b) { return a !== b; }))
  .attr("d", path);

Here is my code : https://plnkr.co/edit/mD1PzxtedWGrZd5ave28?p=preview

Just for the record, the json file combines two layers (departments and regions) created with the same shp and compiled by QGIS for geojson output. After I convert this to topojson by mapshapper.

Upvotes: 2

Views: 938

Answers (1)

Andrew Reid
Andrew Reid

Reputation: 38211

The error lies in your topojson - the two different feature types, departments and regions do not share the same coordinates along their common boundaries.

First, in this sort of situation it is desirable to check to make sure there is no layering issue (often other features are drawn ontop of others, hiding them or portions of them), we can do this by just showing the regional boundaries:

enter image description here

(plunkr)

So the problem can't be layering, if we look at a particular feature in the topojson, say the department of Creuse:

{"arcs":[[-29,-28,-27,-26,202,-297,-296,205,-295,-410,419]],"type":"Polygon","properties":{"codgeo":"23","pop":120581,"libgeo":"Creuse","libgeo_m":"CREUSE","codreg":"75","libreg":"Nouvelle Aquitaine"}}

We see that the department is drawn using 11 arcs representing each portion of the boundary based on shared boundaries between multiple features so that shared boundaries are only represented once in the data.

If we zoom in on Creuse we can see those 11 arc segments shared between either other departments, regions, or with nothing at all:

enter image description here

The thick portions of the boundary correspond to the thick white boundaries in the image in the question, I've only changed the styling and zoom from the original plunkr

This looks problematic, the department should only have 6 arcs:

enter image description here

Why are there additional arcs? Because the boundaries of the departments are not aligned properly - the shared boundaries between departments do not always share the same arcs in your topojson. Chances are the departments might use a different scale than the regions, a different precision or projection, or were made somehow differently. This has resulted in minute nearly imperceptible differences that have resulted in boundaries that share coordinates in reality not sharing the same coordinates in the data, and thus the shared arcs are going unrecognized.

Since you are generating the mesh like this:

topojson.mesh(fr[0], fr[0].objects.reg_GEN_WGS84_UTF8, function(a, b) { return a !== b; })

Only shared boundaries are drawn, which explains the gaps.

We can rectify this a few ways, the easiest way would be to remove the regions altogether. The departments record which region they are in, we can check to see if a boundary should be drawn if the departments on each side of that boundary are in different regions:

.datum(topojson.mesh(fr[0], fr[0].objects.dep_GEN_WGS84_UTF8, function(a, b) { return a.properties.libreg !== b.properties.libreg; }))

Which gives us:

enter image description here

(plunkr)

Alternatively, we can re-habilitate the regional boundaries by importing them into a GIS platform such as ArcGIS and repairing the geometry. We could also import the departments and make a new layer based on region properties in a dissolve. Using the repair geometry tool in Arc, I get a nice boundary (when shown with the same code as the first image here):

enter image description here

There are other methods, such as including a tolerance in aligning arcs, but these might be more difficult than the above.

Upvotes: 3

Related Questions