我收到以下“未捕获的类型错误:无法读取未定义的属性‘长度’”,并且无法找到解决方案。目标是创建一个数据数组,其中 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/