Uncaught Reference Error: queue is not defined

4.8k Views Asked by At

I am getting the error

Uncaught Reference Error: queue is not defined

but I do not understand why I am getting the error. I am trying to draw a map of the USA using D3 and I am/was using this guide but it does not exactly match with the most modern version of D3. Here is my code/the code from the video:

(function (){

var width = 400;
var height = 300;

var svg = d3.select('#d3mapUS')
        .append("svg")
        .attr("width", width)
        .attr("height", height);

var projection = d3.geoAlbersUsa()
        .scale(1280)
        .translate([width/2, height/2]),
    path = d3.geoPath()
        .projection(projection);

var stateIDMap = d3.map({

});

queue()
    .defer(d3.json, "us.json")
    .await(function (err, US) {
        var states = svg.append("g")
                .attr("class", "states")
                .selectAll("g")
                .data(topojson.feature(US, US.objects.states).features)
                .enter()
                .append("g");

        states.append("path")
                .attr("d", path);
    });
})();
2

There are 2 best solutions below

0
Gerardo Furtado On BEST ANSWER

If you are using D3 v4.x, the correct syntax is d3.queue. So, it should be:

d3.queue()
    .defer(d3.json, "us.json")
    .await(function (err, US) {
        var states = svg.append("g")
            .attr("class", "states")
            .selectAll("g")
            .data(topojson.feature(US, US.objects.states).features)
            .enter()
            .append("g");

        states.append("path")
            .attr("d", path);
});

Check the API: https://github.com/d3/d3-queue#queue

0
ThinkBonobo On

is queue part of a library? I'm assuming if you attached it in the html it would work anyway. Make sure it's before you import your code.

but if it's not working or you're worried about compiler errors you can do this:

(function (queue) {
....

})(queue);

I do that when I want to use jquery or window in my iife's.