Add node on click on another node with d3js
Question
Recently I tried mastering the d3js library (which is great) and I am trying to do the easiest stuff but for some reason it doesn't work correctly at all. I did look at related issues but none could help me to find my problem.
The setup is simple, I have a force layout with only one node and no link. When the user clicks on that node, I would like to add a new node that gets linked to the node that was clicked. Here is my code so far. The first added node has a very random position and after that I keep having a message "Uncaught TypeError: Cannot read property '__data__' of null".
Thank you for your help !
<!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>
1 answers
solution1
2 ACCPTED 2013-07-02 15:16:01
For a reason that I can't explain, it works perfectly when I change this bit
node = node.data(force.nodes(), function(d) {return d.name;}).enter()...
to this
node = node.data(force.nodes(), function(d) {return d.name;})
node.enter()...
And do the same to the "link" selection
I guess it has to do with enter selections and co.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.