2017-09-07 48 views
0

我收到「未捕獲的TypeError:無法讀取屬性未定義的長度」,並且無法找到解決方案。目標是爲svg rects元素的x,y,寬度和高度創建一個隨機值的數據數組。嘗試隨機創建數據陣列時獲取未捕獲的TypeError

<html> 
<head> 
    <meta name="description" content="Drawing Shapes w/ D3 - " /> 
    <meta charset="utf-8"> 
    <title>Drawing SVG Shapes with D3</title> 
    <script src="d3.v3.js" charset="utf-8"></script> 
    <style> 
    circle { 
     stroke-width: 5; 
     stroke:steelblue; 
     fill:#888; 
     fill-opacity: .5; 
    } 
     rect { 
     stroke-width: 1; 
     stroke:steelblue; 
     fill:#888; 
     fill-opacity: .5; 
     } 
      line { 
     stroke: red; 
     stroke-linecap: round; 
     stroke-width: 5; 
     } 
    </style> 
</head> 
<body> 
    <script> 

     function makeData(n){ 
      var arr = []; 

      for (var i=0; i<n; i++){ 
      arr.push({ 
       x:Math.floor((Math.random() * 100) + 1), 
       y:Math.floor((Math.random() * 100) + 1), 
       width:Math.floor((Math.random() * 100) + 1), 
       height:Math.floor((Math.random() * 100) + 1) 
      }) 
      }; 

      return arr; 
     } 

     var data = makeData[2]; 

     var svg = d3.select("body") 
      .append("svg") 
      .attr("width",200) 
      .attr("height",200); 

     svg.selectAll("rect") 
      .data(data) 
      .enter() 
      .append("rect") 
      .attr("x", function(d) { return d.x; }) 
      .attr("y", function(d) { return d.y; }) 
      .attr("width", function(d) { return d.width; }) 
      .attr("height", function(d) { return d.height; }); 

    </script> 
</body> 
</html> 

它最初工作時,我有一個靜態的數據陣列,但在嘗試創建從隨機生成的值相同的數據對象時,現在沒有。先謝謝你。

回答

2

函數調用中出現語法錯誤。函數被調用,括號不是方括號:

var data = makeData(2); // not makeData[2] 

如果您打算從該函數返回數組元素提取,使用此:

var data = makeData(2); 
var data1 = data[0]; 
var data2 = data[1]; 
相關問題