D3.js中的嵌套JSON加载
Nested JSON loadings in D3.js
在D3.js中嵌套加载JSON文件的正确方法是什么?这是我试图使用的代码。我遇到的问题是d.p dataset.toString()返回错误Cannot read property 'toString' of undefined。
main.json
[
{
"name" : "A-Module",
"file" : "a.json"
},
{
"name" : "B-Module",
"file" : "b.json"
}
]
a.json
[
{
"owner" : "A-Module",
"dataset" : [1,2,3,4,5,6]
}
]
b.json
[
{
"owner" : "B-Module",
"dataset" : [7,8,9,10]
}
]
var width = 500,
height = 500,
svg;
svg = d3.select("body").append("svg").attr("width", width).attr("height",height);
d3.json("main.json", function(metrics){
for (var i=0; i<metrics.length; i++){
var path = metrics[i].file;
d3.json(path,function(data){
for(var j=0; j<metrics.length;j++){
var owner = data.owner;
var metricName = metrics[j].name;
if (owner === metricName){
metrics[j].dataset = data.dataset;
}
}
});
}
svg.selectAll("g")
.data(metrics)
.enter()
.append("g")
.append("text")
.text(function(d,i){
return d.dataset.toString();
});
});
—更新了Queue.js的非工作示例,我现在遇到的问题是"owner"未定义。
var width = 500,
height = 500,
svg;
svg = d3.select("body").append("svg").attr("width", width).attr("height",height);
d3.json("main.json", function(metrics){
var tasks = [],
q = queue(1),
path;
for (var i=0; i<metrics.length; i++){
path = metrics[i].file;
tasks[i] = function(callback) {
d3.json(path,function(data){
for(var j=0; j<metrics.length;j++){
var owner = data.owner;
var metricName = metrics[j].name;
console.log("1",owner,"2", metricName)
if (owner === metricName){
metrics[j].dataset = data.dataset;
callback(null,data);
console.log("THIS SHOULD NEVER PRINT");
break;
}
}
});
};
}
tasks.forEach(function(t) { q.defer(t); });
q.awaitAll(function(error, results) {
svg.selectAll("g")
.data(metrics)
.enter()
.append("g")
.append("text")
.text(function(d,i){
return d.dataset.toString();
});
});
});
所以我终于让它工作了。查看下面的示例代码,了解更多细节。
var width = 500,
height = 500,
svg;
svg = d3.select("body").append("svg").attr("width", width).attr("height",height);
d3.json("main.json", function(metrics){
var tasks = [],
q = queue(),
paths = [];
for (var i=0; i<metrics.length; i++){
paths[i] = metrics[i].file;
}
paths.forEach(function(fileName){
q.defer(function(callback) {
d3.json(fileName,function(data){ callback(null, data) });
});
});
q.awaitAll(restOfCode)
function restOfCode(err, results){
//Add files into one big file and all the rest of my data bindings
for(var j=0; j<results.length;j++){
for(var k=0; k<metrics.length;k++){
var owner = results[j][0].owner ;
var metricName = metrics[k].name;
if (owner === metricName){
metrics[k].dataset = results[j][0].dataset;
}
}
}
svg.selectAll("g")
.data(metrics)
.enter()
.append("g")
.append("text")
.text(function(d,i){
return d.dataset.toString();
});
}
})
相关文章:
- 在AngularJS应用程序中加载JSON(加载谷歌电子表格)
- 无法使用JSON加载数据表
- phonegap的JSON加载问题
- 如何从外部将json加载到D3应用程序
- 尝试从JSON加载单词时出错
- JSON加载新内容后访问元素
- 在 java 脚本中从 JSON 加载内容之前返回值
- 将属性从 json 加载到 javascript 数组
- 煎茶触摸 JSON 加载到本地存储不起作用
- 将外部 JSON 加载到 Google Chrome 扩展脚本中
- 正在将JSON加载到时间映射中
- 使用动态模式从JSON加载
- Ember.js将json加载到HTML中
- 请求JSON加载到Javascript对象中.回应上的差异
- 强制可折叠布局中的分布式 json 加载
- 如何将不同格式的json加载到Highchart
- Bootstrap示例:将数据从JSON加载到表中
- json加载为javascript代码并使用变量
- FullCalendar未从JSON加载,Chrome除外
- 将JSON加载到Google区域图中