Interactive tool for creating directed graphs, created using d3.js.
Demo: http://bl.ocks.org/cjrd/6863459
Operation:
- drag/scroll to translate/zoom the graph
license: gpl-3.0 | |
height: 960 | |
border: no | |
redirect: https://observablehq.com/@d3/hierarchical-edge-bundling |
license: gpl-3.0 |
Copyright (c) 2013 Ross Kirsling | |
Permission is hereby granted, free of charge, to any person obtaining | |
a copy of this software and associated documentation files (the | |
"Software"), to deal in the Software without restriction, including | |
without limitation the rights to use, copy, modify, merge, publish, | |
distribute, sublicense, and/or sell copies of the Software, and to | |
permit persons to whom the Software is furnished to do so, subject to | |
the following conditions: |
license: gpl-3.0 |
height: 650 | |
license: mit |
Interactive tool for creating directed graphs, created using d3.js.
Demo: http://bl.ocks.org/cjrd/6863459
Operation:
This example pulls together various examples of work with trees in D3.js.
The panning functionality can certainly be improved in my opinion and I would be thrilled to see better solutions contributed.
One can do all manner of housekeeping or server related calls on the drop event to manage a remote tree dataset for example.
Dragging can be performed on any node other than root (flare). Dropping can be done on any node.
Panning can either be done by dragging an empty part of the SVG around or dragging a node towards an edge.