Once I put a function into defer() in D3, the data structure inside console.log changed in other function

Question

The following snippet is my code that will fetch data from csv file.

d3.queue()
    .defer(d3.csv, "sales.csv", function(d){
        //d.decade = d.decade.replace("-","_")
        //console.log('lalala')
    })
    .await(ready)

And then this is the function that will create bubble.

function ready(error,datapoints){
    console.log(datapoints)
    var circles = svg.selectAll(".artist")
    .data(datapoints)
    .enter().append("circle")
    .attr("class","artist")// the ".artist" will transform into class name in HTML
    .attr("r", function(d){
        return radiusScale(d.sales)
    })
    .attr("fill","lightblue")
    .on("click",function(d){
        console.log(d)
    })
    //.attr("cx",100)
    //.attr("cy",300)

    simulation.nodes(datapoints)
        .on('tick', ticked)

    function ticked(){
        circles
            .attr("cx",function(d){
                return d.x
            })
            .attr("cy", function(d){
                return d.y
            })
    }
}

The problem arise when I do console.log(dataset). Whenever I have:

function(d){
        d.decade = d.decade.replace("-","_")
    }

in my

.defer(d3.csv, "sales.csv", function(d){
        d.decade = d.decade.replace("-","_")
    })

the result in the console.log(datapoints) will be something like this: weird_result

And if I remove

function(d){
        d.decade = d.decade.replace("-","_")
    }

and becomes:

defer(d3.csv, "sales.csv")

The result would be normal like this: normal_result

Can someone explain to me why it is? And how to do data stemming in this case?

Answer 1

Add return d; at the end of the function!