我正在尝试使用 D3plus 创建箱线图并使用 jQuery 将 JSON 数据上传/存储到变量中:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="./JS/d3.min.js"></script>
<script src="./JS/d3plus.min.js"></script>
<script src="./JS/jQuery.min.js"></script>
</head>
<body>
<div id="viz"></div>
<script>
var data;
$.getJSON("./Data/boxplot.json", function(json) {
data = json;
});
var visualization = d3plus.viz()
.container("#viz")
.data(data)
.type("box")
.id("name")
.x("building")
.y("total")
.time(false)
.height(800)
.ui([{
"label": "Visualization Type",
"method": "type",
"value": ["scatter","box"]
}])
.draw()
</script>
</body>
</html>
如果我将 json 数据复制并粘贴到文件中，它就会起作用。但是，当我尝试从存储在“Data”文件夹中的外部 json 文件中获取数据时，它不起作用。我收到错误:“箱线图可视化需要设置“数据”方法”。
这是我的文件结构:
这是我的 json 文件:
[{"building":"MMB","name":"Shane","total":1},{"building":"MMB","name":"Geneviève, Bérubé","total":1},{"building":"MMB","name":"Dana","total":10},{"building":"MMB","name":"karine","total":2},{"building":"MMB","name":"Anthony","total":1},{"building":"MMB","name":"Erwin","total":6},{"building":"MMB","name":"Jake","total":2},
{"building":"MMB","name":"Karen","total":1},{"building":"MMB","name":"sabrina","total":2},{"building":"MMB","name":"Jeannine","total":4}]
非常感谢您抽出时间!
编辑:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="./JS/d3.min.js"></script>
<script src="./JS/d3plus.min.js"></script>
<script src="./JS/jQuery.min.js"></script>
</head>
<body>
<div id="viz"></div>
<script>
$.getJSON("./Data/boxplot.json", function(json) {
data = json,
success = function(data){
.container("#viz")
.data(data)
.type("box")
.id("name")
.x("building")
.y("total")
.time(false)
.height(800)
.ui([{
"label": "Visualization Type",
"method": "type",
"value": ["scatter","box"]
}])
.draw()
}
})
</script>
</body>
</html>
最佳答案
$.getJSON("./Data/boxplot.json", function(json) {
data = json,
success = function(data){
d3plus.viz()
.container("#viz")
.data(data)
.type("box")
.id("name")
.x("building")
.y("total")
.time(false)
.height(800)
.ui([{
"label": "Visualization Type",
"method": "type",
"value": ["scatter","box"]
}])
.draw()
}
})
类似的东西应该有效。 getJSON 调用后的“success”值是一个函数，该函数将在异步响应返回后调用(因此 data 参数将传递给该函数)。没有检查 D3 的东西是否有效，但这应该可以解决您的 AJAX 调用问题。
关于javascript - 我正在尝试使用 jQuery 加载要在 D3 plus 可视化中使用的 JSON 文件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39949759/