gpt4 book ai didi

javascript - D3 - 未捕获的类型错误 : Cannot read property 'length' of undefined

转载 作者:行者123 更新时间:2023-11-30 12:48:30 25 4
gpt4 key购买 nike

以下代码错误。其余字段的数据没有问题。

<!DOCTYPE html>
<html>
<head>
<title>Data Entry</title>
<meta charset='utf-8'/>
<meta name="keywords" content="D3"/>
<script type="text/javascript" src="d3/d3.v3.js"></script>
<style type="text/css">
.table {border: 2px; text-align: center;}
.th {font-size: 12px; font-weight: bold; color: blue;}
.td {font-size: 12px;}
</style>
</head>
<body>
<script type="text/javascript">
var dataset;
d3.text('data.txt', function(d){dataset = d3.csv.parse(d, function(d){return {id: +d.id, name: d.name};});});
d3.select('body').append('table').attr('class','table').selectAll('tr').data(dataset).enter().append('tr');
</script>
</body>
</html>

以下屏幕截图:Error in Chrome

最佳答案

您需要考虑两件事,第一是您已将对数据集的引用放在回调函数之外。因此,虽然您已将 dataset 变量创建为全局变量,以便可以在 d3.text block 之外访问它,但当表生成。因此,如果您将表格生成代码移动到 d3.text block 中,您将解决此问题。您还可以使用 queue.js 对数据请求进行排队.

另一件事是您试图绑定(bind)对象的单个元素数组,其中您需要一个对象数组,因为 d3 遍历该数组以创建(在本例中为表行)。然后使用对象中的信息来填充您的表。

这两个问题都在以下代码中得到解决,但是请注意,我没有用任何东西填充表格单元格,只是创建了行。为此,我建议阅读 d3noobs post以及 Shawn Allen 引用的 stackoverflow 答案.

var dataset =[];
d3.text('data.txt', function(d) {
d3.csv.parse(d, function(d) {
var el = {
id: +d.id,
name: d.name
};
dataset.push(el)
});
var table = d3.select('body')
.append('table')
.attr('class', 'table');

table.selectAll('tr')
.data(dataset).enter()
.append('tr')
.attr("class", "rows");

});

最后一件事是您可以只使用 d3.csv 而不是 d3.textd3.csv.parse

关于javascript - D3 - 未捕获的类型错误 : Cannot read property 'length' of undefined,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21767005/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com