d3 输入未放置数据

Question

Using d3, I am reading in 8760 data points (one for each hour of 2013) from a csv into a 2-d array and then trying to create them as circles in an <svg> element. The code successfully imports the data, as I can view it in the browser's console. However, the enter function does not seem to be applying the data to create the circles. No errors are raised.

Code:

  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script>
  var w = 900, h = 500;
  var dataset = [];

  d3.csv("Jsorted2.csv", function(error, data) {
    dataset = data.map(function(d) { return [ +d["Load"], new Date(d["dtDateTime"]), +d["Month"], +d["Hour"], +d["DayofYear"], +d["NetLoad"]]; });
  });

  var svg = d3.select("body")
    .append("svg")
    .attr("width", w)
    .attr("height", h);

  svg.selectAll("circle")
    .data( dataset )
    .enter()
    .append("circle")
    .attr("cx", function(d,i) { return i; })
    .attr("cy", function(d,i) { return d[0]; })
    .attr("r", function(d,i) { return d[5]; });

</script>

The data loads properly:

Browser Inspector Console Screenshot

But the circles are missing:

Browser Inspector Source Screenshot

I have found different errors if I change the initial definition of dataset. If I use

var dataset = [[]];

the data still loads, but now I receive an error when d3 tries the grab the data:

d3.v4.min.js:3 Error: <circle> attribute cy: Expected length, "NaN".
(anonymous function) 
@ d3.v4.min.js:3Q_ 
@ d3.v4.min.js:6K_ 
@ d3.v4.min.js:6(anonymous function) 
@ D3test4LD.html:29

And d3 gets a little further in creating the circles:

<svg width="900" height="500">
<circle cx="0" cy="NaN"></circle>
</svg>

Why does d3 not load the data to circles? It appears as if d3 is not passing the data to d as it should, as d[0] has no length. If I cannot get this to work, I'll just write a Javascript for loop to place them myself, but I'd like to figure out why this doesn't work. It looks like a type conversion issue, but I import the data with a +, which is supposed to set the data as a number. I can even test that in the console:

> typeof(dataset[0][0])
"number" 

Please do not include a js for loop as a solution.

---

UPDATE

So, I did solve my problem after researching asynchronous data loading, as per the answer below. For clear and easy future reference, here is one way to code a solution:

setInterval(drawLD, 2000);

function drawLD(){
    svg.selectAll("circle")
      .data( dataset )
      .enter()
      .append("circle")
      .attr("cx", function(d,i) { return Math.round(i/8760); })
      .attr("cy", function(d,i) { return Math.round(d[0]/maxload); })
      .attr("r", function(d,i) { return 2; });
  }

Answer 1

d3.csv is an asynchronous function. The code that creates the circles is executed before your csv data has returned. Place your d3 code inside the callback.

<script>
  var w = 900, h = 500;
  var dataset = [];

  d3.csv("Jsorted2.csv", function(error, data) {
    dataset = data.map(function(d) { return [ +d["Load"], new Date(d["dtDateTime"]), +d["Month"], +d["Hour"], +d["DayofYear"], +d["NetLoad"]]; });

    var svg = d3.select("body")
    .append("svg")
    .attr("width", w)
    .attr("height", h);

  svg.selectAll("circle")
    .data( dataset )
    .enter()
    .append("circle")
    .attr("cx", function(d,i) { return i; })
    .attr("cy", function(d,i) { return d[0]; })
    .attr("r", function(d,i) { return d[5]; });

  });
</script>