d3.tree custom nodes

[Matteo Gazzin]

This is a customization of d3.layout.tree(). Each node is composed by a circle, a label and if it has at least one child another circle after the label.

I want to use this chart to show the dependencies between some objects(nodes): imagine that there is a set of permissions belonging to the user that is viewing the chart; some permission are missing for the node A21 so the entire path is marked with a different color.

Features

• The y position of each node is obtained using d3.layout.tree().nodes(data) method
• Then the x position is modified using the real size of the label as measure
• Children sharing the same depth have the same x.
• The current node is highlighted with a blue rectangle placed under it.
• There's a custom Spline function because using d3.diagonal the anchor points of the splines in each node were switched: in other words a link path starts from the middle top of the source node and ends to the middle bottom of the target node. The custom function is to fix this behaviour.

Demo: http://bl.ocks.org/t3o-it/5117844

I'm pretty new on d3 so I don't know if I've use the right coding pattern.

Any help/comment is appreciated.

Thanks, 

Matteo.

[Chris Viau]

Excellent. Very useful example.

--
You received this message because you are subscribed to the Google Groups "d3-js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to d3-js+un...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[Matteo Gazzin]

Thanks Chris... 

[Maggie Lee]

This is very nice!  I look forward to trying to implement it.