嵌套JSON：未定義

Question

我試圖與在D3JS一個JSON嵌套數組工作，想不通爲什麼在世界上，我在該行得到一個「屬性未定義長度」的錯誤屬性長度讀：

.attr("d", function(d) { return line(d.points); }). 

這裏的JSON：

[ 
{ 
    "aspectRatio": 1.247386759581881, 
    "closed": 1, 
    "xyData": [ 
     { 
      "x0": 0.53078594712060867, 
      "x1": 0.95454545454545459, 
      "x2": 0.95454545454545459, 
      "x3": 0.53078594712060867, 
      "x4": 0.53078594712060867, 
      "y0": 0.52936622215603868, 
      "y1": 0.52936622215603868, 
      "y2": 0.13179275296659432, 
      "y3": 0.13179275296659432, 
      "y4": 0.52936622215603868 
     } 
    ] 
}, 
{ 
    "aspectRatio": 1.247386759581881, 
    "closed": 1, 
    "xyData": [ 
     { 
      "x0": 0.045454545454545435, 
      "x1": 0.41126403477001078, 
      "x2": 0.41126403477001078, 
      "x3": 0.045454545454545435, 
      "x4": 0.045454545454545435, 
      "y0": 0.86820724703340568, 
      "y1": 0.86820724703340568, 
      "y2": 0.44804437618547044, 
      "y3": 0.44804437618547044, 
      "y4": 0.86820724703340568 
     } 
    ] 
} 
] 

而這裏的代碼：

function loadEss(filename,svgName,mainWidth){ 
var svgName; 
d3.json(filename, function(error, data) { 
    data.forEach(function(kv){ 
     kv.xyData.forEach(function(d) { 
      d.points = []; 
      aspect=1.5; 
      for (var i = 0; d["x"+i] !== "" && (typeof d["x"+i] !== 'undefined'); i++) { 
       d.points.push([mainWidth*d["x"+i], mainWidth/aspect*(d["y"+i])]); 
      } 
      console.log(d.points); 
     }); 
    }); 

    var margin = {top: 0, right: 0, bottom: 0, left: 0},  
     width = mainWidth - margin.left - margin.right,    
     height = mainWidth/aspect - margin.top - margin.bottom; 

    svgName= d3.select("body")         
     .append("svg")          
      .attr("width", width + margin.left + margin.right) 
      .attr("height", height + margin.top + margin.bottom) 
     .append("g")            
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 


    var line = 
    d3.svg.line() 
    .interpolate("linear-closed") 
    ; 

    svgName.selectAll("path") 
     .data(data) 
     .enter() 
     .append("path") 
     ; 

    svgName.selectAll("path") 
     .attr("d", function(d) { return line(d.points); }) 
     .attr("stroke-linecap","round") 
     .attr("stroke-linejoin","round") 
     ; 
}); 

}; 

這項工作是巴SED關閉的前兩個主題：Nested JSON array and D3JS和d3JS: Drawing Line Segments from CSV

任何幫助將非常感激。

Answer 1

這裏有一個jsfiddle

，你正在構建中獲得存儲在錯誤的地方，所以在下文進一步d.points點進行陣列，當你把它傳遞給line()爲空。代替d.points你需要kv.points：

kv.xyData.forEach(function(d) { 
     kv.points = []; 
     aspect=1.5; 
     for (var i = 0; d["x"+i] !== "" && (typeof d["x"+i] !== 'undefined'); i++) { 
      kv.points.push([mainWidth*d["x"+i], mainWidth/aspect*(d["y"+i])]); 
     } 
     console.log(kv.points); 
    });