user2759126
user2759126

Reputation: 11

Why does my D3/topojson SVG not render with queue.js?

I am attempting to create a world map with D3.js and have multiple CSV files load separately via queue.js. However, I am unable to render the json geometries, let alone able to attach CSV values to the path id.

Without the queue.js method, the SVG loads perfectly in the browser with this method:

     d3.json("world-50m.json", function(error, world) {

       svg.append("g")  
        .selectAll("path")
          .data(topojson.feature(world,world.objects.countries).features)
        .enter().append("path")
          .attr("class","land")
          .attr("d", path)
       })

But the queue.js method I followed here does not render the SVG.

First:

    queue()
      .defer(d3.json, "world-50m.json")
    //.defer(d3.csv, "gni.csv", function(d) {rateById.set(d.id, +d.value);})
      .await(ready);

Then:

      function ready(error, world){
         svg.append("g")  
          .selectAll("path")
            .data(topojson.feature(world,world.objects.countries).features)
          .enter().append("path")
            .attr("class", "land")
        //  .attr("class", function(d) {return quantize(rateById.get(d.id));})
            .attr("d", path)

       }

Can someone please advise me as to what mistake I may have made? This is a snippet of the json file structure:

            {
      "type":"Topology",
      "transform":{
        "scale":[0.03600360036003601,0.017366249624962495],
        "translate":[-180,-90]
      },
      "objects":{
        "countries":{
          "type":"GeometryCollection","geometries":[
              {"type":"Polygon","arcs":[[0,1,2,3,4,5]],"id":"Afghanistan"},...

Upvotes: 1

Views: 818

Answers (0)

Related Questions