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没有阿贾克斯因此所有的代码被顺序执行，你没有得到那个错误。

希望这可以解决您的问题。