了解d3.js强制布局的更新过程

Question

For quiet a bit of time now I'm trying to update my d3.js force layout graph. Sadly every hint I can find leads to this example . I don't fully understand it and now have questions to different parts of this process.

setTimeout(function() {
  var a = {id: "a"}, b = {id: "b"}, c = {id: "c"};
  nodes.push(a, b, c);
  links.push({source: a, target: b}, {source: a, target: c}, {source: b, target: c});
  start();
}, 0);

Assuming the setTimeout function is only there to provide some action to happen with some seconds inbetween:

Q 1: Could I basically remove the setTimeout() and write it as function initializeGraph(){/*do stuff*/} ?
Q 2: nodes.push() and links.push() do only push these elements to the node & link array but don't make any changes in the graph yet?

Answer 1

1) yes question 1 you can do it that way

working code here

2) D3 mean data driven document. So when you change the data the DOM get updated. Thus the reason why you are updating nodes which hold the node data. The node( var node = svg.selectAll(".node"), ) is holding the node related DOM.

Answer 2

Q1. You could, but it wouldn't happen at a set time, the example you link to is set up to do 3 changes to the data and hence the layout at 3-second intervals just so it's apparent what's happening to anyone watching the demo

Thinking of initialising a d3 layout through that timeout function or whatever you rename it is probably awry. The force graph declaration is the initialization in my head. In the full example again, the update/start function takes your data and binds it to dom elements, whether it's the first time it's run or the 100th time it's the same code, just that in the first case the data join will produce new elements only through the .enter() qualifier.

Q2. I found d3 difficult at first because it uses the same/near names for different things.

In the full example you link to, nodes is an array that is passed to a separate force.nodes() function, and node is a selection of dom elements that is made when joined to force.nodes() ( force.nodes() presumably returns the nodes array mentioned first)

Changes occur in the start function where this data-join happens and dom elements are added/updated/removed as required.

Answer 3

1: yes the timeout doesnt have to be there, you could append this to button click.

2: yes they only get pushed to those arrays, the layout only gets updated when you call update, ie run the initialization of the force graph with the new data. I've just been on this question which may help you understand :

https://stackoverflow.com/users/3382204/cyril