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调用，并且是异步的，我们可以将其称为代码片段

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将首先被执行。

所以要确保在ajax重新编写代码之后执行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时，没有Ajax，因此所有代码都按顺序执行，你不会得到错误。

希望这能解决你的问题。

ds3从mysql

1 个答案: