dynamic node updating in node-link tree
steve w
I have started playing around with d3 which works great for getting an
initial node-link tree up and running.
I am wondering if you have a suggestion as to what the best approach
to the following problem set is before I embark on too much code.
I do not have all the data at the start so I am unable to build a
hierarchy in advance (probably just the root node to start). Data then
comes in at a later date as a stream and the parent(s) for each node
is identifiable using an id array in each item (hmm... just noticed a
node has depth idea so I suppose it can only have 1 parent).
Anwayy I want to :
1) build an initial tree (straightforward)
2) Add nodes to the correct parent as they arrive
3) Redraw only from the parent node downwards.
Most of the tree examples seem to assume that the hierarchy is already
complete and there does not seem to be an easy way to inject node
structures as children into particular nodes and trigger a redraw of
that part of the tree only. I feel seem to be missing something
obvious? I had a look at the protovis docs and the layouts seem to
accept node and link arrays - although d3 does not seem to follow this
pattern.
I understand about binding the data to the id to be able to control
the node id and the bar graph example seems straight forward in
updating as the data is flat. So I suppose I am asking how the
hierarchy data model operates and what is the best to approach this
problem.
Do I need to reconstruct the hierarchy in advance in some way and swap
the model out and redraw the whole tree?
Can I inject nodes into a parent node (does this mean I need to
construct my own node objects ?) and re-evaluate the subtree.
Any pointers gratefully received.
Mike Bostock
> hierarchy in advance (probably just the root node to start). Data then
> comes in at a later date as a stream and the parent(s) for each node
> is identifiable using an id array in each item (hmm... just noticed a
> node has depth idea so I suppose it can only have 1 parent).
This is a fun problem, so I took a crack at it:
The only tricky part is was that you need to stash the previous layout
positions, so that when a new node enters, you can animate it from the
parent's previous position. However, at the same time, the parent is
repositioning because of the nature of the tidy tree layout!
> 3) Redraw only from the parent node downwards.
This isn't always possible with the Reingold-Tilford algorithm because
inserting a new child node can affect the layout of its parents and
other nodes in the graph. There are other tree layout algorithms where
only the new node (or only its siblings) would be affected, but these
layouts won't be as tidy. Regardless, it's always possible to do the
minimum amount of work given your layout in D3, by using the
enter/update/exit selections.
> Can I inject nodes into a parent node (does this mean I need to
> construct my own node objects ?) and re-evaluate the subtree.
You can inject nodes into your data, but by the nature of the layout
algorithm, you have to re-evaluate the entire tree. You could, of
course, write your own tree layout algorithm that supports incremental
updates more efficiently. But, depending on how many nodes you have in
your tree, and your desire to keep the appearance tidy, the existing
layout may be the best option.
Mike
Steve
Thanks - that is exactly what I was looking for. A working example is a nice surprise.
I can see I was getting tied up in a procedural mindset and failing to pick up on how the links and nodes related.
regards
Steve
