2014-07-10 216 views
0

D3.js中嵌套加載JSON文件的正確方法是什麼?這是我試圖使用的代碼。我遇到的問題是,d.dataset.toString()返回錯誤無法讀取未定義的屬性'toString'。D3.js中嵌套的JSON加載

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(); 
      }); 
     }); 
    }); 
+0

'd3.json'是異步的。 [這個問題](http://stackoverflow.com/questions/16455194/how-to-store-a-json-object-loaded-from-a-file)可能會有所幫助。 –

+0

如果我有一個包含10個不同公司的主JSON文件,它會存儲關於這10個公司中每一個公司的名稱,地址等信息,我該如何做到這一點?我想創建一個ag元素並用名稱和地址填充該g元素。然後,對於每個公司,還存在一個data_companyA.json文件,其中包含我想用來繪製應放入相應公司的g元素中的線圖的數據。你可以制定一些僞代碼,說明我可以如何做到這一點,因爲我完全失去了好幾天,它很爛:( – user3748315

+0

那麼你需要嵌套的JSON回調或者使用類似[queue](https:// github。 com/mbostock/queue) –

回答

0

所以我終於搞定了。查看下面的代碼以查看一個工作示例,並閱讀this瞭解更多詳情。

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