javascript - 尝试随机创建数据数组时出现未捕获的类型错误

标签 javascript d3.js svg

我收到以下“未捕获的类型错误:无法读取未定义的属性‘长度’”,并且无法找到解决方案。目标是创建一个数据数组,其中 svg 矩形元素的 x、y、宽度和高度具有随机值。

<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>

它最初在我有静态数据数组时起作用,但现在在尝试从随机生成的值创建相同的数据对象时不起作用。先感谢您。

最佳答案

函数调用中存在语法错误。使用括号而不是方括号调用函数:

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

如果您想从函数返回的数组中提取元素,请使用:

var data = makeData(2);
var data1 = data[0];
var data2 = data[1];

关于javascript - 尝试随机创建数据数组时出现未捕获的类型错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46095073/

相关文章:

javascript - 304 延迟与内联 javascript

Javascript 和 setMonth 行为异常

JavaScript 检测互联网连接

javascript - 链接中的标签未显示

html - 在内联 svg 标签上使用 viewBox 属性时出现 WebStorm 警告

javascript:传递函数

javascript - 不可变数组的问题

javascript - 如何获取沿饼图边缘的切片坐标?

javascript - 自定义形状 block

javascript - d3.js 将图像显示为圆形