在D3中使用JSON数据

Question

I want to use the json data later in my code so have put it into a variable and return the variable to a function. If I hard code the json data it works (see below, the second part of the code is only so that I can check that it works)

function read() {
var data = [{"APSYear":"2014","Domain":"Reading","Level":"3","KWC":"469.62","Aus":"418.3","Vic":"431.7","P90":"544.92"}];
data.forEach(function(d) {
     readkwc = d.KWC;
     readvic = d.Vic;
     read90 = d.P90;    
});
return [readkwc, readvic, read90];
}
var read = read();
var body = d3.select('body');
body.append('p')
    .text(read[0])
    .append('p')
    .text(read[1])
    .append('p')
    .text(read[2]);

but if I read the json code from a file it doesn't work (see below)

function read() {
d3.json("statsread.php", function(error, data) {
data.forEach(function(d) {
    readkwc = d.KWC;
    readvic = d.Vic;
    read90 = d.P90; 
    });
}); 
return [readkwc, readvic, read90];
}
var read = read();
var body = d3.select('body');
    body.append('p')
        .text(read[0])
        .append('p')
        .text(read[1])
        .append('p')
        .text(read[2]);

Where am I going wrong?

Answer 1

• You are making an asynchronous request to "statsread.php" inside a function, hence you will get the data immediately. Hence var read = read(); will be undefined.

• The variables "readkwc, readvic, read90" will be unavailable when the API is failed, so you need to handle the failure case as well.

Here is the fix.

 var body = d3.select('body'); function read() { d3.json("statsread.php", function(error, data) { if (error) return console.warn(error); data.forEach(function(d) { readkwc = d.KWC; readvic = d.Vic; read90 = d.P90; }); var read = [readkwc, readvic, read90]; body.append('p') .text(read[0]) .append('p') .text(read[1]) .append('p') .text(read[2]); }); } read(); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>