Javascript ds3从mysql绘制json数据

当我在脚本中使用json代码运行以下代码时，它工作得很好。当我使用从mysql数据库中提取的第二组json数据运行它时，它也可以工作，但是当我尝试使用数据库中的第一组数据运行它时，我得到以下错误。 ReferenceError:returnX未定义问题。php:44:7 ReferenceError:svgSelection未定义问题。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"); 
});

/*var统计=[
{“APSYear”：“2015年”，“领域”：“阅读”，“等级”：“3”，“CWK”：“505.51”，“澳大利亚”：“425.8”，“维多利亚州”：“439.2”}，
{“APSYear”：“2015年”，“领域”：“阅读”，“级别”：“5”，“CWK”：“619.55”，“澳大利亚”：“498.2”，“维多利亚州”：“507.3”}，
{“APSYear”：“2015年”，“领域”：“阅读”，“级别”：“7”，“CWK”：“611.08”，“澳大利亚”：“545.9”，“维多利亚州”：“550.9”}，
{“APSYear”：“2015年”，“领域”：“阅读”，“级别”：“9”，“CWK”：“620.02”，“澳大利亚”：“580.4”，“维也纳国际中心”：“586.8”}
];*/
json（“statistics.php”），函数（statistics）{
统计。forEach（函数（d）{
d、 apswear=+d.apswear；
d、 级别=+d级；
d、 CWK=+d.CWK；
d、 澳大利亚=+d.Aus；
d、 维克=+d.维克；
});
var svgSelection=d3.选择（“正文”）.追加（“svg”）
.attr（“转换”、“翻译（200,0）”）
.attr（“宽度”，900）
.attr（“高度”，600）
var rectangle=svgSelection.selectAll（“rect”）
.数据（统计）
.输入（）
.append（“rect”）；
var rectangleattributes=矩形
.attr（“x”，函数（d）{
如果（d.Level==“3”）{returnX=“50”；
}如果（d.Level==“5”）{returnX=“200”；
}如果（d.Level==“7”）{returnX=“350”；
}else如果（d.Level==“9”）{returnX=“500”}
返回returnX；
})
.attr（“y”，函数（d）{
如果（d.Level==“3”）{returnY=（800-d.CWK）；
}如果（d.Level==“5”）{returnY=（800-d.CWK）；
}如果（d.Level==“7”）{returnY=（800-d.CWK）；
}else如果（d.Level==“9”）{returnY=（800-d.CWK）；}
回归回归；
})
.attr（“宽度”，50）
.attr（“高度”，功能（d）{
如果（d.Level==“3”）{returnHeight=d.CWK-d.Aus；
}如果（d.Level==“5”）{returnHeight=d.CWK-d.Aus；
}else如果（d.Level==“7”）{returnHeight=d.CWK-d.Aus；
}else如果（d.Level==“9”）{returnHeight=d.CWK-d.Aus；}
返回高度；
})
.样式（“填充”、“白色”）
.风格（“笔划”、“黑色”）；
});
/*var reading=[{“FirstName”：“John”，“姓氏”：“Brown”，“apswear”：“2015”，“Level”：“Year 7”，“reading”：“643.3”}，
{“名字”：“约翰”，“姓氏”：“布朗”，“年份”：“2013”，“级别”：“第5年”，“阅读”：“513.7”}，
{“名字”：“约翰”，“姓氏”：“布朗”，“年份”：“2011”，“级别”：“第3年”，“阅读”：“493.5”}
];*/
d3.json（“selectdata.php？student=”，函数（读取）{
reading.forEach（函数（d）{
d、 阅读=+d.阅读；
});  
//添加SVG文本元素属性
var point=svgSelection.selectAll（“圆”）
.数据（读取）
.输入（）
.附加（“圆圈”）；
变量circleAttributes=点
.attr（“cx”，功能（d）{
var-returnX；
如果（d.Level==“第三年”）{returnX=“75”；
}如果（d.Level==“第5年”）{returnX=“225”；
}如果（d.Level==“第7年”）{returnX=“375”；
}如果（d.Level==“第9年”{returnX=“525”；}
返回returnX；
})          
.attr（“cy”，函数（d）{
var returnY；
returnY=800-d.读数；
returnY；}）
.attr（“r”，5）
.样式（“填充”、“红色”）；
var text=svgSelection.selectAll（“text.value4”）
.数据（读取）
.输入（）
.附加（“文本”）；
//添加SVG文本元素属性
var textLabels=text
.attr（“x”，函数（d）{
如果（d.Level==“第三年”）{returnX=“105”；
}如果（d.Level==“第5年”）{returnX=“255”；
}如果（d.Level==“第7年”）{returnX=“405”；
}如果（d.Level==“第9年”{returnX=“555”；}
返回returnX；
})
.attr（“y”，函数（d）{
var returnY；
returnY=800-d.读数；
returnY；}）
.text（函数（d）{返回d.READING；}）
.attr（“dy”，“.35em”）//设置偏移y位置
.attr（“文本锚定”、“开始”）//设置锚定y对齐
.attr（“字体大小”，“10px”）
.attr（“填充”、“红色”）；
});

下面的代码是一个Ajax调用，是异步的，我们称之为代码片段1

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;
});

我们将此代码段称为2

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，因此所有代码都是按顺序执行的，并且不会出现错误

---

希望这能解决您的问题。

第一组数据和第二组数据是什么意思。我已经注释掉了每个数据集的json版本，第一个叫做统计，第二个是读取。这两个都是从php代码中复制出来的，从mysql数据库中读取。我仍然对代码有问题。我在您的代码版本中看到的唯一区别是右括号和大括号。当我运行它时，在参数列表之后会得到一个errorSyntaxError:missing）。我觉得奇怪的是，代码适用于读取数据，但不适用于统计数据。谢谢你给我的更多帮助