最近我尝试掌握 d3js 库(这很棒)，我正在尝试做最简单的事情，但由于某种原因它根本无法正常工作。我确实查看了相关问题，但没有一个可以帮助我找到我的问题。
设置很简单，我有一个只有一个节点且没有链接的强制布局。当用户单击该节点时，我想添加一个新节点，该节点链接到被单击的节点。到目前为止，这是我的代码。第一个添加的节点有一个非常随机的位置，之后我一直收到消息“Uncaught TypeError: Cannot read property '__data__' of null”。
感谢您的帮助!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>D3 test</title>
</head>
<body>
<div id="viz">
</div>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script type="text/javascript">
var w = 800;
var h = 800;
var padding = 100;
var svg = d3.select("#viz")
.append("svg")
.attr("width", w)
.attr("height", h);
var nodes = [{name:"n0"}];
var links = [];
var force = d3.layout.force()
.size([w, h])
.linkDistance([100])
.charge([-30])
.start();
var link = svg.selectAll(".link"),
node = svg.selectAll(".node");
update();
function update() {
force.nodes(nodes)
.links(links)
.start();
link = link.data(force.links(), function(d) {return d.source.name + "-" + d.target.name;})
.enter()
.insert("line", ".node")
.attr("class", "link")
.style("stroke", "red")
.style("stroke-width", 2);
node = node.data(force.nodes(), function(d) {return d.name;})
.enter()
.append("circle")
.attr("class", "node")
.attr("r", 10)
.style("fill", "black")
.on("click", function(d) {
var n = {name:"n"+nodes.length};
nodes.push(n);
links.push({source:d, target:n});
update();
})
.call(force.drag);
}
force.on("tick", function() {
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;});
node.attr("cx", function(d) {return d.x})
.attr("cy", function(d) {return d.y});
});
</script>
</body>
最佳答案
由于我无法解释的原因，当我改变这个位时它工作得很好
node = node.data(force.nodes(), function(d) {return d.name;}).enter()...
对此
node = node.data(force.nodes(), function(d) {return d.name;})
node.enter()...
对“链接”选择做同样的事情
我想这与输入选择和合作有关。
关于javascript - 使用 d3js 在单击另一个节点时添加节点，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17427170/