0

I project countries borders via :

d3.json("./admin_0.topo.json", function(error, json) { 
    var L0 =  json.objects.admin_0;
//inland borders lines
    svg.append("g").attr("id","border")
        .attr("style", mesh)
    .selectAll("path")
        .data([topojson.mesh(json, L0, function(a, b) { return a !== b; })])
    .enter().append("path")
        .attr("d", path);

  //coast lines
    svg.append("g").attr("id","coast")
            .attr("style", coast)
        .append("path")
        .datum(topojson.mesh(json, L0, function(a, b) { return a == b; }))
        .attr("d", path);
});

Some borders svg lines connects to other ones without reasons:

enter image description here

When zommed in:

enter image description here

Note: Nor coast lines nor closed polygons are messed up. I generated this data via npm topojson & natural earth shapefiles. It also seems one out of two international borders is missing around the yellow India (Pakistani, Nepalese, Cambodian borders).

# Download (not tested)
curl https://github.com/nvkelso/natural-earth-vector/raw/master/10m_cultural/ne_10m_admin_0_countries.shp
# shp2topojson:
topojson \
    --id-property name \
    -p name=name \
    -q 1e4 \
    --filter=small \
    -o admin_0.topo.json \
    -- admin_0=ne_10m_admin_0_countries.shp

What is bugging ? How could I fix it ?

Demo, #Mesh, potentially related to: D3js SVG open lines display a fill artifact, how to fix it? & "stroke-dasharray:x,y;" mess up svg path? (Chrome).

Community
  • 1
  • 1
Hugolpz
  • 17,296
  • 26
  • 100
  • 187
  • 1
    Does it work if you use `topojson.feature` instead of `mesh`? – Lars Kotthoff Jan 30 '15 at 09:40
  • @LarsKotthoff: `data(topojson.feature(json,L0).features)` works, no artifacts. That lost the inland arcs filtering, Which I cannot always overlay by blue coastline. Political border lines may be larger than coast's lines. **Note**: no international borders ismissing around the yellow India (Pakistani, Nepalese, Cambodian borders). – Hugolpz Jan 30 '15 at 11:10
  • My understanding is that data is correct, mesh does something wrong. – Hugolpz Jan 30 '15 at 11:11
  • 1
    Well it looks like all the countries are in one path for some reason. Did you inspect the output of `topojson.mesh()` to see if that's the case? – Lars Kotthoff Jan 30 '15 at 11:23
  • Ok, [Mesh](https://github.com/mbostock/topojson/wiki/API-Reference#mesh) output a single MultiLineString object `{type: "MultiLineString", coordinates: Array[ [...],[...],...,[...] ]}`. While `.datum() handle single objects fine, `.data()` need an array of objects (our lines) which mesh doesn't provide. I must stick with `.datum()` if i want to filter the inland lines via mesh. I can switch to `.data()` if I don't use mesh. – Hugolpz Jan 30 '15 at 11:55
  • @LarsKotthoff: I posted a work around answer. Yet I don't understand why D3js projects MultilineString as non-closed paths and messing it all. MultilineStrings should end up into **multiple svg lines** (not connecting). – Hugolpz Jan 30 '15 at 13:30
  • @LarsKotthoff: Bug actually due to `style="stroke-dasharray:4,4;". Testing ongoing. – Hugolpz Jan 30 '15 at 15:06

1 Answers1

1

Bug actually due to `style="stroke-dasharray:4,4;" on Chrome browser. "stroke-dasharray:x,y;" mess up svg path? (Chrome).

Community
  • 1
  • 1
Hugolpz
  • 17,296
  • 26
  • 100
  • 187