我正在尝试使用jQuery加载要在D3 plus可视化中使用的JSON文件
[英]I am trying to load a JSON file to be used in a D3 plus visualization using jQuery
问题描述
I am trying to create a boxplot by using D3plus and uploading/storing JSON data into a variable with jQuery: 
我正在尝试通过使用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>
If I copy-and-past the json data into the file, it works. 如果我将json数据复制并粘贴到文件中，它将起作用。 However, when I try to fetch the data from an external json file stored in a folder "Data", it doesn't work. 但是，当我尝试从存储在“数据”文件夹中的外部json文件中获取数据时，它不起作用。 I get the error: "Box Plot visualizations require setting the "data" method". 我收到错误消息：“箱形图可视化需要设置“数据”方法”。
Here is my file structure: 这是我的文件结构：
Here is my json file: 这是我的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}]
Thank you very much for your time! 非常感谢您的宝贵时间！
EDIT: 编辑：
<!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>
2 个解决方案
解决方案1
1 已采纳 2016-10-10 00:24:57
$.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()
}
})
Something like that should work. 这样的事情应该起作用。 The value of "success" after your getJSON call is a function that will be called after the asynchronous response is return (thus the data parameter which is passed to the function). 在您的getJSON调用之后，“成功”的值是一个函数，该函数将在异步响应返回后被调用（因此将data参数传递给该函数）。 Didn't check that the D3 stuff worked but that should solve your AJAX call problem. 没检查D3东西是否起作用，但这应该可以解决您的AJAX呼叫问题。
解决方案2
1 2017-04-23 18:21:13
D3plus supports loading data from JSON files. D3plus支持从JSON文件加载数据。 Simply pass the path to the data method: 只需将路径传递给data方法：
var visualization = d3plus.viz()
.container("#viz")
.data("./Data/boxplot.json")
.type("box")
.id("name")
.x("building")
.y("total")
.time(false)
.height(800)
.ui([{
"label": "Visualization Type",
"method": "type",
"value": ["scatter","box"]
}])
.draw();
And for reference, here are all of the custom properties that can be set for the data method: https://github.com/alexandersimoes/d3plus/wiki/Visualizations#data 作为参考，以下是可以为数据方法设置的所有自定义属性： https : //github.com/alexandersimoes/d3plus/wiki/Visualizations#data
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.