I am currently working with the world-50m.json file for a projection, but I'm facing an issue where several countries are being cut off at the edges when filled with color. This results in horizontal fill sections/lines across the map.
This problem is also visible in the d3-geo example projection available here: https://github.com/d3/d3-geo/blob/master/test/data/world-50m.json
https://i.sstatic.net/DrVSD.jpg
I'm wondering if there is another JSON file that doesn't have these cutoff countries or if I could somehow exclude specific polygons from my fill. Identifying all the countries/shapes with this issue might be challenging, especially because some of them are small and possibly not essential to the map (except for Russia).
Here is the code snippet I'm using:
var w = 960,
h = 660,
active = d3.select(null);
var projection = d3.geoMercator()
.scale(150)
.translate([w/2, h/2])
.precision(.1);
var path = d3.geo.path()
.projection(projection);
var countries = svg.append("svg:g").attr("id", "countries");
d3.json("world-50m.json", function(error, us) {
mapFeatures = topojson.feature(us, us.objects.countries).features;
mapFeatures.type = "countries";
drawMap();
});
function drawMap() {
countries.selectAll("path")
.data(mapFeatures)
.enter().append("svg:path")
.attr("d", path)
.attr("class", "feature")
.attr("data-id", function(d) { return d.id; })
.style("fill", "blue")
.style("stroke", "white")
.style("stroke-width", ".2px");
};
Any assistance on resolving this issue would be highly appreciated!