ICP7 - pondurivenkatesh9/WEB GitHub Wiki
Name : Venkatesh Ponduri
Class Id : 23
Mail : [email protected]
code : https://github.com/pondurivenkatesh9/WEB/tree/master/ICP7
Objective
The aim of ICP7 is to implement Drag, Drop, Zoomable, Collapsible Tree with auto-sizing using D3.js. The below figure describes the output obtained by using D3.js.
.png)
Zoom In and Out
After loading json data into tree using D3.js we have to perform the zoom in and zoom out operation using D3.js zoom function. The code is shown in the below figure. Here i have defined the zoom function and defined zoom listeners which call the zoom function on zoom event.
.png)
Zoom In and Out Outputs
The below images shows the Zoom in and Zoom out of the graph without changing the page size of the web browser.
.png)
.png)
Collapsing
Here two methods collapse and expand are created. Initially the children nodes are removed and stored in another variable. When calling expand method the other variable data is attached back to its original state.
.png)
Now i am defining click function such a way that if we click on node if the children are in expand position it collapse and viseversa and i am updating the node.
.png)
Outputs for collapsing and expansion
This image shows the collapse of first and second university nodes.
.png)
expansion of second university.
.png)
Drag and drop of tree
To perform darg and drop operations i am removing the links and nodes of the desired node which is to be dragged and dropped. Later i am removing the parent link and depending on the mouse events i am dropping the particular node at another node.
.png)
.png)
.png)
Output for Drag and Drop of node
Here the first university is dragged and dropped at the sub branches of second university. As soon as it is dragged and dropped it expands to full and shows all its sub nodes or branches.
.png)