CODEWITHSUNDEEP
javascriptd3.jssvg
Peter
Peter

Reputation: 1894

Why do I have to re-assign the links and nodes when updating the d3.js force layout

In this example, where everybody leads me to, the code writer re-assigns the var link and node in the start() method. I don't really understand why. Since both snipets are identical, I'll focus on one:

link = link.data(force.links(), function(d) { return d.source.id + "-" + d.target.id; });
link.enter().insert("line", ".node").attr("class", "link");
link.exit().remove();

Q 1: link is already asigned as var link = svg.selectAll(".link"); meaning link contains all DOM Elements in the svg container classed .link. This selection may be empty at the start of the example, but why does he re-asign it to all links in the force?

Q 2: Why does he return the d.source.id and the d.target.id property? Is this necessary to identify the link?

Q 3: Other manipulations (such as add color to a link) would be done like this?

link.enter().insert("line", ".node").attr("class", "link").style("stroke", function(d) { 
    return d.color;
});

Upvotes: 0

Views: 58

Answers (1)

Cyril Cherian
Cyril Cherian

Reputation: 32327

Question 1:

Like you said initially its empty var link = svg.selectAll(".link"); But when the data comes in the start function this variable holds all the current links.

Question 2

Q 2: Why does he return the d.source.id and the d.target.id property? Is this necessary to identify the link?

link.data(force.links(), function(d) { return d.source.id + "-" + d.target.id; });

This is done to uniquely identify a link. The function returns a unique id of a link which is a combination of source and target id. Needed so that the exit function knows after intersection which link need to be removed.

Question 3

Q 3: Other manipulations (such as add color to a link) would be done like this?

link.enter().insert("line", ".node").attr("class", "link").style("stroke", function(d) { 
    return d.color;
});

Yes! if the link data has a variable color in it. Something like this {source: a, target: b, color:"red"} code here

Hope this helps!

Upvotes: 1

Related Questions