gpt4 book ai didi

javascript - D3 强制引导未捕获类型错误

转载 作者:行者123 更新时间:2023-12-03 04:39:16 24 4
gpt4 key购买 nike

我正在尝试根据代码 here 生成 D3 力直接图。我生成了以下脚本:

<script src='http://d3js.org/d3.v3.min.js'></script>
<script>
var width = 640, height = 480;

var nodes = [{"name": "xxx"},{"name": "xxx"},{"name": "xxx"},{"name": "xxx"},{"name": "xxx"},{"name": "xxx"},{"name": "xxx"},{"name": "xxx"},{"name": "xxx"},{"name": "xxx"},{"name": "xxx"},{"name": "xxx"},{"name": "xxx"},{"name": "xxx"},{"name": "xxx"},{"name": "xxx"},{"name": "xxx"},{"name": "xxx"},{"name": "xxx"},{"name": "xxx"},{"name": "xxx"},{"name": "xxx"},{"name": "xxx"},{"name": "xxx"},{"name": "xxx"},{"name": "xxx"},{"name": "xxx"},{"name": "xxx"},{"name": "xxxn"},{"name": "xxx"},{"name": "xxx"},{"name": "xxx"},{"name": "xxx"},{"name": "xxx"},{"name": "xxx"},{"name": "xxx"},{"name": "xxx"}];
var links = [{"source": "0", "target": "1", "value": 1},{"source": "2", "target": "1", "value": 1},{"source": "3", "target": "1", "value": 1},{"source": "4", "target": "1", "value": 1},{"source": "5", "target": "1", "value": 1},{"source": "6", "target": "1", "value": 1},{"source": "7", "target": "1", "value": 1},{"source": "8", "target": "1", "value": 1},{"source": "9", "target": "1", "value": 1},{"source": "10", "target": "1", "value": 1},{"source": "11", "target": "1", "value": 1},{"source": "12", "target": "1", "value": 1},{"source": "13", "target": "1", "value": 1},{"source": "14", "target": "1", "value": 1},{"source": "1", "target": "15", "value": 1},{"source": "1", "target": "16", "value": 1},{"source": "1", "target": "17", "value": 1},{"source": "1", "target": "18", "value": 1},{"source": "1", "target": "19", "value": 1},{"source": "1", "target": "20", "value": 1},{"source": "1", "target": "21", "value": 1},{"source": "1", "target": "22", "value": 1},{"source": "1", "target": "23", "value": 1},{"source": "1", "target": "24", "value": 1},{"source": "1", "target": "25", "value": 1},{"source": "1", "target": "26", "value": 1},{"source": "1", "target": "27", "value": 1},{"source": "1", "target": "28", "value": 1},{"source": "1", "target": "29", "value": 1},{"source": "1", "target": "30", "value": 1},{"source": "1", "target": "31", "value": 1},{"source": "1", "target": "32", "value": 1},{"source": "1", "target": "33", "value": 1},{"source": "1", "target": "34", "value": 1},{"source": "1", "target": "35", "value": 1},{"source": "1", "target": "36", "value": 1}];
var svg = d3.select('body').append('svg')
.attr('width', width)
.attr('height', height);

var force = d3.layout.force()
.size([width, height])
.nodes(nodes)
.links(links);

force.linkDistance(width/2);

var link = svg.selectAll('.link')
.data(links)
.enter().append('line')
.attr('class', 'link');

var node = svg.selectAll('.node')
.data(nodes)
.enter().append('circle')
.attr('class', 'node');

force.on('end', function() {
node.attr('r', width/25)
.attr('cx', function(d) { return d.x; })
.attr('cy', function(d) { return d.y; });
link.attr('x1', function(d) { return d.source.x; })
.attr('y1', function(d) { return d.source.y; })
.attr('x2', function(d) { return d.target.x; })
.attr('y2', function(d) { return d.target.y; });

});
force.start();

</script>

(xxx 是真实姓名)。它抛出“未捕获的类型错误:无法读取未定义的属性‘push’”。我在另一个线程中读到,如果节点编号不正确,则可能会导致这种情况,但我从零开始对节点进行编号,据我所知,链接中不存在节点中不存在的节点。谁能告诉我出了什么问题吗?

最佳答案

查看 links 数组中的对象:

[{"source": "0", "target": "1", "value": 1},...
//this is a string ---------^

这里没有数字,只有字符串。为了使强制起作用,您必须设置源和目标的数量

一个简单的解决方案是强制:

links.forEach(function(d) {
d.source = +d.source;
d.target = +d.target;
})

这是生成的代码:

var nodes = [{
"name": "xxx"
}, {
"name": "xxx"
}, {
"name": "xxx"
}, {
"name": "xxx"
}, {
"name": "xxx"
}, {
"name": "xxx"
}, {
"name": "xxx"
}, {
"name": "xxx"
}, {
"name": "xxx"
}, {
"name": "xxx"
}, {
"name": "xxx"
}, {
"name": "xxx"
}, {
"name": "xxx"
}, {
"name": "xxx"
}, {
"name": "xxx"
}, {
"name": "xxx"
}, {
"name": "xxx"
}, {
"name": "xxx"
}, {
"name": "xxx"
}, {
"name": "xxx"
}, {
"name": "xxx"
}, {
"name": "xxx"
}, {
"name": "xxx"
}, {
"name": "xxx"
}, {
"name": "xxx"
}, {
"name": "xxx"
}, {
"name": "xxx"
}, {
"name": "xxx"
}, {
"name": "xxxn"
}, {
"name": "xxx"
}, {
"name": "xxx"
}, {
"name": "xxx"
}, {
"name": "xxx"
}, {
"name": "xxx"
}, {
"name": "xxx"
}, {
"name": "xxx"
}, {
"name": "xxx"
}];
var links = [{
"source": "0",
"target": "1",
"value": 1
}, {
"source": "2",
"target": "1",
"value": 1
}, {
"source": "3",
"target": "1",
"value": 1
}, {
"source": "4",
"target": "1",
"value": 1
}, {
"source": "5",
"target": "1",
"value": 1
}, {
"source": "6",
"target": "1",
"value": 1
}, {
"source": "7",
"target": "1",
"value": 1
}, {
"source": "8",
"target": "1",
"value": 1
}, {
"source": "9",
"target": "1",
"value": 1
}, {
"source": "10",
"target": "1",
"value": 1
}, {
"source": "11",
"target": "1",
"value": 1
}, {
"source": "12",
"target": "1",
"value": 1
}, {
"source": "13",
"target": "1",
"value": 1
}, {
"source": "14",
"target": "1",
"value": 1
}, {
"source": "1",
"target": "15",
"value": 1
}, {
"source": "1",
"target": "16",
"value": 1
}, {
"source": "1",
"target": "17",
"value": 1
}, {
"source": "1",
"target": "18",
"value": 1
}, {
"source": "1",
"target": "19",
"value": 1
}, {
"source": "1",
"target": "20",
"value": 1
}, {
"source": "1",
"target": "21",
"value": 1
}, {
"source": "1",
"target": "22",
"value": 1
}, {
"source": "1",
"target": "23",
"value": 1
}, {
"source": "1",
"target": "24",
"value": 1
}, {
"source": "1",
"target": "25",
"value": 1
}, {
"source": "1",
"target": "26",
"value": 1
}, {
"source": "1",
"target": "27",
"value": 1
}, {
"source": "1",
"target": "28",
"value": 1
}, {
"source": "1",
"target": "29",
"value": 1
}, {
"source": "1",
"target": "30",
"value": 1
}, {
"source": "1",
"target": "31",
"value": 1
}, {
"source": "1",
"target": "32",
"value": 1
}, {
"source": "1",
"target": "33",
"value": 1
}, {
"source": "1",
"target": "34",
"value": 1
}, {
"source": "1",
"target": "35",
"value": 1
}, {
"source": "1",
"target": "36",
"value": 1
}];
links.forEach(function(d) {
d.source = +d.source;
d.target = +d.target;
})
var width = 400,
height = 400;
var svg = d3.select('body').append('svg')
.attr('width', width)
.attr('height', height);

var force = d3.layout.force()
.size([width, height])
.nodes(nodes)
.links(links);

force.linkDistance(width / 2);

var link = svg.selectAll('.link')
.data(links)
.enter().append('line')
.attr('class', 'link');

var node = svg.selectAll('.node')
.data(nodes)
.enter().append('circle')
.attr('class', 'node');

force.on("start", function(){
svg.append("text")
.attr("class", "text")
.attr("x", 150)
.attr("y", 80)
.text("Calculating...");
});

force.on('end', function() {
svg.select(".text").remove();
node.attr('r', width / 25)
.attr('cx', function(d) {
return d.x;
})
.attr('cy', function(d) {
return d.y;
});
link.attr('x1', function(d) {
return d.source.x;
})
.attr('y1', function(d) {
return d.source.y;
})
.attr('x2', function(d) {
return d.target.x;
})
.attr('y2', function(d) {
return d.target.y;
});

});
force.start();
<script src='https://d3js.org/d3.v3.min.js'></script>

编辑:由于您使用 .on("end" 来绘制节点,因此您必须等到强制完成。

关于javascript - D3 强制引导未捕获类型错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43151065/

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