ds3從mysql繪製json數據

Question

當我在腳本中使用json代碼運行以下代碼時，它工作正常。當我使用從mysql數據庫中繪製的第二組json數據運行它時，它也可以工作，但是當我嘗試使用數據庫中的第一組數據運行它時，出現以下錯誤。 ReferenceError：returnX未定義problem.php：44：7 ReferenceError：svgSelection未定義problem.php：78：5 錯誤在哪裏？感謝任何幫助。

/* var statistics = [ 
{"APSYear":"2015","Domain":"Reading","Level":"3","CWK":"505.51","Aus":"425.8","Vic":"439.2"}, 
{"APSYear":"2015","Domain":"Reading","Level":"5","CWK":"619.55","Aus":"498.2","Vic":"507.3"}, 
{"APSYear":"2015","Domain":"Reading","Level":"7","CWK":"611.08","Aus":"545.9","Vic":"550.9"}, 
{"APSYear":"2015","Domain":"Reading","Level":"9","CWK":"620.02","Aus":"580.4","Vic":"586.8"} 
];*/ 

d3.json("statistics.php", function(statistics) { 
    statistics.forEach(function(d) { 
    d.APSYear = +d.APSYear; 
    d.Level = +d.Level; 
    d.CWK = +d.CWK; 
    d.Aus = +d.Aus; 
    d.Vic = +d.Vic; 
}); 

var svgSelection = d3.select("body").append("svg") 
    .attr("transform", "translate(200,0)") 
    .attr("width", 900) 
    .attr("height", 600) 

var rectangle = svgSelection.selectAll("rect") 
    .data(statistics) 
    .enter() 
    .append("rect");  

var rectangleattributes = rectangle 
    .attr("x", function (d){ 
    if (d.Level === "3") { returnX = "50"; 
        } else if (d.Level === "5") { returnX = "200"; 
        } else if (d.Level === "7") { returnX = "350"; 
        } else if (d.Level === "9") { returnX = "500";} 
        return returnX; 
        }) 
    .attr("y", function (d) { 
    if (d.Level === "3") { returnY = (800 - d.CWK); 
        } else if (d.Level === "5") { returnY = (800 - d.CWK); 
        } else if (d.Level === "7") { returnY = (800 - d.CWK); 
        } else if (d.Level === "9") { returnY = (800 - d.CWK);} 
        return returnY; 
        }) 
    .attr("width", 50) 
    .attr("height", function (d) { 
    if (d.Level === "3") { returnHeight = d.CWK-d.Aus; 
        } else if (d.Level === "5") { returnHeight = d.CWK-d.Aus; 
        } else if (d.Level === "7") { returnHeight = d.CWK-d.Aus; 
        } else if (d.Level === "9") { returnHeight = d.CWK-d.Aus;} 
        return returnHeight; 
        }) 
    .style("fill", "white") 
    .style("stroke", "black"); 
}); 

/* var reading = [{"FirstName":"John","Surname":"Brown","APSYear":"2015","Level":"Year 7","READING":"643.3"}, 
{"FirstName":"John","Surname":"Brown","APSYear":"2013","Level":"Year 5","READING":"513.7"}, 
{"FirstName":"John","Surname":"Brown","APSYear":"2011","Level":"Year 3","READING":"493.5"} 
];*/ 

    d3.json("selectdata.php?student=<?php echo $student ?>", function(reading) { 
    reading.forEach(function(d) { 
    d.READING = +d.READING; 
    }); 

//Add SVG Text Element Attributes  

var point = svgSelection.selectAll("circle") 
         .data(reading) 
         .enter() 
         .append("circle"); 

var circleAttributes = point 
        .attr("cx", function(d) { 
        var returnX; 
        if (d.Level === "Year 3") { returnX = "75"; 
        } else if (d.Level === "Year 5") { returnX = "225"; 
        } else if (d.Level === "Year 7") { returnX = "375"; 
        } else if (d.Level === "Year 9") { returnX = "525";} 
        return returnX; 
        })   
        .attr("cy", function (d) { 
        var returnY; 
        returnY = 800 - d.READING; 
        return returnY; }) 
        .attr("r", 5) 
        .style("fill", "red"); 

var text = svgSelection.selectAll("text.value4") 
        .data(reading) 
        .enter() 
        .append("text"); 

//Add SVG Text Element Attributes 
var textLabels = text 
    .attr("x", function (d){ 
    if (d.Level === "Year 3") { returnX = "105"; 
        } else if (d.Level === "Year 5") { returnX = "255"; 
        } else if (d.Level === "Year 7") { returnX = "405"; 
        } else if (d.Level === "Year 9") { returnX = "555";} 
        return returnX; 
        }) 
      .attr("y", function (d) { 
       var returnY; 
       returnY = 800 - d.READING; 
       return returnY; }) 
      .text(function (d) { return d.READING;}) 
      .attr("dy", ".35em")   // set offset y position 
      .attr("text-anchor", "start") // set anchor y justification 
      .attr("font-size", "10px") 
      .attr("fill", "red"); 
}); 

Answer 1

下面這段代碼是一個Ajax調用是異步的，您把它叫做代碼snippet1

d3.json("statistics.php", function(statistics) { 
    statistics.forEach(function(d) { 
    d.APSYear = +d.APSYear; 
    d.Level = +d.Level; 
    d.CWK = +d.CWK; 
    d.Aus = +d.Aus; 
    d.Vic = +d.Vic; 
}); 

讓我們把這個snippet2

var svgSelection = d3.select("body").append("svg") 
    .attr("transform", "translate(200,0)") 
    .attr("width", 900) 
    .attr("height", 600) 

var rectangle = svgSelection.selectAll("rect") 
    .data(statistics) 
    .enter() 
    .append("rect");  

只是因爲snippet1是異步稍後將會執行snippet2將首先執行。

因此，爲了確保snippet2後阿賈克斯重新寫你這樣的代碼被執行：

d3.json("statistics.php", function(statistics) { 
    statistics.forEach(function(d) { 
    d.APSYear = +d.APSYear; 
    d.Level = +d.Level; 
    d.CWK = +d.CWK; 
    d.Aus = +d.Aus; 
    d.Vic = +d.Vic; 
} 
//now make the graph 
var svgSelection = d3.select("body").append("svg") 
    .attr("transform", "translate(200,0)") 
    .attr("width", 900) 
    .attr("height", 600) 

var rectangle = svgSelection.selectAll("rect") 
    .data(statistics) 
    .enter() 
    .append("rect");  
...your other code. 
); 

當您只需提供JSON沒有阿賈克斯因此所有的代碼被順序執行，你沒有得到那個錯誤。

希望這可以解決您的問題。