CODEWITHSUNDEEP
d3.jsmap-projectionstopojsonparsing-error
user123456789
user123456789

Reputation: 43

D3.js parsing error - rotation of orthogonal map projection

I have an orthogonal projection of the world map, in D3 and by using TopoJSON. I am coloring the countries with each loading of data by calling this code. The globe rotates constantly.

My problem is, that during rotating I get the error message:

Error

>> Error: Problem parsing d="" >> in d3.v3.min.js:1

for each: 

    .attr("d", path);

First, I thought that it depends on the topojson script because there are different versions. But it didn't.

javascript code:

init the properties of the globe / projection:

svg.append("defs").append("path")
.datum({type: "Sphere"})
.attr("id", "sphere")
    .attr("d", path);

...

svg.append("path")
    .datum(graticule)
    .attr("class", "graticule")
    .attr("d", path);

read the data from json and tsv and append land and countries:

queue()
    .defer(d3.json, "world-110m.json")
    .defer(d3.tsv, "world-country-names.tsv")
    .await(ready);

function ready(error, world, names) {

        var countries = topojson.feature(world, world.objects.countries).features,;
            i = -1,
            n = countries.length;

          countries.forEach(function(d) { 
            var tryit = names.filter(function(n) { return d.id == n.id; })[0];
            if (typeof tryit === "undefined"){
              d.name = "Undefined";
              console.log(d);
            } else {
              d.name = tryit.name; 
            }
          });

        var country = svg.selectAll(".country").data(countries);
        country
        .enter().insert("path", ".graticule")
          .attr("id", function(d){ 
                return "c" + d.id;  
          })
          .attr("d", path);

        svg.insert("path", ".graticule")
          .datum(topojson.mesh(world, world.objects.countries, function(a, b) { return a !== b; }))
          .attr("class", "boundary")
          .attr("d", path);

    }

rotation of the globe:

var velocity = .03,
    then = Date.now();

d3.timer(function() {  
    var angle = velocity * (Date.now() - then);  
    projection.rotate([angle,0,0]);  
    svg.selectAll("path")  
      .attr("d", path.projection(projection));  

});

Upvotes: 2

Views: 702

Answers (1)

nverba
nverba

Reputation: 4073

This is a known WebKit bug. I've got the same issue, it doesn't seem to impact the svg rendering in any way.

Anything beyond the clipAngle is assigned d="", which I believe should be a valid null value, but flags as an error.

Upvotes: 3

Related Questions