Currently, I am developing a globe where multiple locations are marked with small circles. These locations provide relevant information through tooltips when the cursor hovers over them.
The issue I am facing is that the global map often renders incomplete. Some countries do not appear, affecting the behavior of my code significantly. Interestingly, every 5th time I refresh the browser, the map does render completely. I suspect there might be a gap in my code or a syntax problem in the JSON file causing confusion for the browser.
For reference, this problem persists across FF, Safari, and Chrome while utilizing D3.js version 3.
Below is the rendering code snippet:
d3.json("d/world-countries.json", function (error, collection) {
map.selectAll("path")
.data(collection.features)
.enter()
.append("svg:path")
.attr("class", "country")
.attr("d", path)
.append("svg:title")
.text(function(d) {
return d.properties.name; });
});
track = "countries";
d3.json("d/quakes.json", function (error, collection) {
map.selectAll("quakes")
.data(collection.features)
.enter()
.append("svg:path")
.attr("r", function(d) {
return impactSize(d.properties.mag);
})
.attr("cx", function(d) {
return projection(d.geometry.coordinates)[0];
})
.attr("cy", function(d) {
return projection(d.geometry.coordinates)[1];
})
.attr("class", "quake")
.on("mouseover", nodehi)
.on("mouseout", nodelo)
.attr("d", path)
.append("svg:title")
.text(function(d) {
var tip = d.properties.description + " long "+ (d.geometry.coordinates)[0] + " lat " + (d.geometry.coordinates)[1];
return tip;
});
});
Your insights on resolving this issue would be highly valued...