script type text javascript src https d3js org d3 v7 min js script svg viewBox 0 20 200 200 script const svg d3 select svg let node_data x 100 y 10 r 5 x 50 y 45 r 2 x 30 y 20 r 4 let edge_data source 0 target 1 source 1 target 2 source 2 target 0 let n_frames_to_simulate 5 create a copy of the node data nodes node_data map d Object create d create new force simulation specifying the forces to use and in our case how many ticks or frames we ll want to simulate sim d3 forceSimulation nodes force x d3 forceX 100 2 force y d3 forceY 100 2 force collide d3 forceCollide radius d d r 1 use the node s actual radius stop tick n_frames_to_simulate bind data and draw nodes var node svg selectAll node data nodes enter append circle attr class node attr r d d r attr cx d d x attr cy d d y call force drag indicate how we should update the graph for each tick sim on tick node attr cx d d x attr cy d d y script script type text javascript src https d3js org d3 v7 min js script svg viewBox 0 20 200 200 script const svg d3 select svg let node_data x 100 y 10 r 5 x 50 y 45 r 2 x 30 y 20 r 4 node_data for let i 0 i 50 i node_data i x Math random 200 y Math random 200 r 1 Math random 10 let edge_data source 0 target 1 source 1 target 2 source 2 target 0 let n_frames_to_simulate 5 create a copy of the node data nodes node_data map d Object create d create new force simulation specifying the forces to use and in our case how many ticks or frames we ll want to simulate sim d3 forceSimulation nodes force x d3 forceX 100 2 force y d3 forceY 100 2 force collide d3 forceCollide radius d d r 1 use the node s actual radius stop tick n_frames_to_simulate let col d3 interpolate d3 rgb 70 130 180 d3 rgb 169 169 169 0 5 rgb 120 150 175 bind data and draw nodes var node svg selectAll node data nodes enter append circle attr class node attr r d d r attr cx d d x attr cy d d y attr fill d col Math random call force drag indicate how we should update the graph for each tick sim on tick node attr cx d d x attr cy d d y script Connects the nodes together script type text javascript src https d3js org d3 v7 min js script svg viewBox 0 20 200 200 script const svg d3 select svg let node_data x 100 y 10 r 5 x 50 y 45 r 2 x 30 y 20 r 4 let edge_data source 0 target 1 source 1 target 2 source 2 target 0 let n_frames_to_simulate 5 create a copy of the node data nodes node_data map d Object create d edges edge_data map d Object create d create new force simulation specifying the forces to use and in our case how many ticks or frames we ll want to simulate sim d3 forceSimulation nodes force x d3 forceX 100 2 force y d3 forceY 100 2 force collide d3 forceCollide radius d d r 1 use the node s actual radius force link d3 forceLink edges force charge d3 forceManyBody strength 8 force collide d3 forceCollide radius 9 stop tick n_frames_to_simulate d3 interpolate to obtain a color within the range of two colors let col d3 interpolate d3 rgb 70 130 180 d3 rgb 169 169 169 0 5 rgb 120 150 175 Draw lines for Links between Nodes var link svg selectAll line data edges enter append line style stroke ccc style stroke width 2 bind data and draw nodes var node svg selectAll node data nodes enter append circle attr class node attr r d d r attr cx d d x attr cy d d y attr fill d col Math random call force drag indicate how we should update the graph for each tick sim on tick link attr x1 function d return d source x attr y1 function d return d source y attr x2 function d return d target x attr y2 function d return d target y node attr cx d d x attr cy d d y script No size information or starting positions just data and the links script type text javascript src https d3js org d3 v7 min js script svg viewBox 0 20 200 200 script const svg d3 select svg var data nodes name Sachin name Murali name Glenn McGrath name AB de Villiers name Akram name BCCI edges source 0 target 1 source 0 target 2 source 2 target 3 source 2 target 4 source 3 target 4 let col d3 interpolate d3 rgb 70 130 180 d3 rgb 169 169 169 0 5 rgb 120 150 175 init a force layout using the nodes and edges in dataset var force d3 forceSimulation data nodes force x d3 forceX 100 2 force y d3 forceY 100 2 force collide d3 forceCollide radius d d r 1 use the node s actual radius force link d3 forceLink data edges force charge d3 forceManyBody strength 5 force collide d3 forceCollide radius 9 tick 2 start time create edges var edges svg selectAll line data data edges enter append line style stroke ccc style stroke width 2 create nodes var nodes svg selectAll circle data data nodes enter append circle attr r 3 attr fill d col Math random style fill red call force drag On every tick event re render force on tick function edges attr x1 function d return d source x attr y1 function d return d source y attr x2 function d return d target x attr y2 function d return d target y nodes attr cx function d return d x attr cy function d return d y script Added in dragging image for item and text script type text javascript src https d3js org d3 v7 min js script script src https cdn jsdelivr net npm d3 selection 3 script svg viewBox 0 20 200 200 script const svg d3 select svg var data nodes name Sachin name Murali name Glenn McGrath name AB de Villiers name Akram name BCCI edges source 0 target 1 source 0 target 2 source 2 target 3 source 2 target 4 source 3 target 4 let col d3 interpolate d3 rgb 70 130 180 d3 rgb 169 169 169 0 5 rgb 120 150 175 init a force layout using the nodes and edges in dataset var force d3 forceSimulation data nodes force x d3 forceX 100 2 strength 0 1 force y d3 forceY 100 2 strength 0 1 force collide d3 forceCollide radius d d r 1 use the node s actual radius force link d3 forceLink data edges strength 1 force charge d3 forceManyBody strength 5 call force drag force force collide d3 forceCollide radius 9 tick 2 create edges var edges svg selectAll line data data edges enter append line style stroke ccc style stroke width 2 create nodes var nodes svg selectAll circle data data nodes enter append svg g nodes append svg image append circle attr class circle attr xlink href https github com favicon ico style fill red attr r 3 attr fill d col Math random attr x 4px attr y 4px attr width 8px attr height 8px d3 selectAll circle call force drag nodes append svg text attr class nodetext attr font size 5 attr dx 12 attr dy 35em text function d return d name d3 selectAll image nodes call d3 drag on start dragstarted on drag dragged on end dragended on click clicked On every tick event re render force on tick tick function tick edges attr x1 function d return d source x attr y1 function d return d source y attr x2 function d return d target x attr y2 function d return d target y nodes attr cx function d return d x attr cy function d return d y nodes attr transform function d return translate d x d y function dragstarted d3 select this attr stroke black d3 select this attr fill blue force stop console log child this children 0 console log grabbing d3 select this raise style cursor grabbing force alphaTarget 0 3 restart function dragged event d d x event x d y event y d3 select this raise attr cx d x event x attr cy d y event y d3 select this raise attr transform d translate d x d y force alpha 0 3 restart force alphaTarget 0 3 restart force restart force tick tick function dragended force alphaTarget 0 3 restart d3 select this attr stroke null d3 select this attr fill black force alphaTarget 0 3 restart force stop force restart script Grouping of forces script type text javascript src https d3js org d3 v7 min js script script src https cdn jsdelivr net npm d3 selection 3 script svg viewBox 0 20 300 300 script const svg d3 select svg set the dimensions and margins of the graph const width 200 const height 200 create dummy data just one element per circle const data name A group 1 name B group 1 name C group 1 name D group 1 name E group 1 name F group 1 name G group 2 name H group 2 name I group 2 name J group 2 name K group 2 name L group 2 name M group 3 name N group 3 name O group 3 A scale that gives a X target position for each group const x d3 scaleOrdinal domain 1 2 3 range 50 100 140 A color scale const color d3 scaleOrdinal domain 1 2 3 range F8766D 00BA38 619CFF Initialize the circle all located at the center of the svg area const node svg append g selectAll circle data data join circle attr r 9 attr cx width 2 attr cy height 2 style fill d color d group style fill opacity 0 8 attr stroke black style stroke width 2 call d3 drag call specific function when circle is dragged on start dragstarted on drag dragged on end dragended Features of the forces applied to the nodes var simulation d3 forceSimulation force x d3 forceX strength 0 5 x d x d group force y d3 forceY strength 0 1 y height 2 force center d3 forceCenter x width 2 y height 2 Attraction to the center of the svg area force charge d3 forceManyBody strength 1 Nodes are attracted one each other of value is 0 force collide d3 forceCollide strength 1 radius 9 iterations 1 Force that avoids circle overlapping Apply these forces to the nodes and update their positions Once the force algorithm is happy with positions alpha value is low enough simulations will stop simulation nodes data on tick function d node attr cx d d x attr cy d d y What happens when a circle is dragged function dragstarted event d if event active simulation alphaTarget 03 restart d fx d x d fy d y function dragged event d d fx event x d fy event y function dragended event d if event active simulation alphaTarget 03 d fx null d fy null script
get y nodes attr cx function d return d x attr cy function d return d y script Added in dragging image for item and text script type text javascript src https d3js org d3 v7 min js script script src https cdn jsdelivr net npm d3 selection 3 script svg viewBox 0 20 200 200 script const svg d3 select svg var data nodes name Sachin name Murali name Glenn McGrath name AB de Villiers name Akram name BCCI edges source 0 target 1 source 0 target 2 source 2 target 3 source 2 target 4 source 3 target 4 let col d3 interpolate d3 rgb 70 130 180 d3 rgb 169 169 169 0 5 rgb 120 150 175 init a force layout using the nodes and edges in dataset var force d3 forceSimulation data nodes force x d3 forceX 100 2 strength 0 1 force y d3 forceY 100 2 strength 0 1 force collide d3 forceCollide radius d d r 1 use the node s actual radius force link d3 forceLink data edges strength 1 force charge d3 forceManyBody strength 5 call force drag force force collide d3 forceCollide radius 9 tick 2 create edges var edges svg selectAll line data data edges enter append line style stroke ccc style stroke width 2 create nodes var nodes svg selectAll circle data data nodes enter append svg g nodes append svg image append circle attr class circle attr xlink href https github com favicon ico style fill red attr r 3 attr fill d col Math random attr x 4px attr y 4px attr width 8px attr height 8px d3 selectAll circle call force drag nodes append svg text attr class nodetext attr font size 5 attr dx 12 attr dy 35em text function d return d name d3 selectAll image nodes call d3 drag on start dragstarted on drag dragged on end dragended on click clicked On every tick event re render force on tick tick function tick edges attr x1 function d return d source x attr y1 function d return d source y attr x2 function d return d target x attr y2 function d return d target y nodes attr cx function d return d x attr cy function d return d y nodes attr transform function d return translate d x d y function dragstarted d3 select this attr stroke black d3 select this attr fill blue force stop console log child this children 0 console log grabbing d3 select this raise style cursor grabbing force alphaTarget 0 3 restart function dragged event d d x event x d y event y d3 select this raise attr cx d x event x attr cy d y event y d3 select this raise attr transform d translate d x d y force alpha 0 3 restart force alphaTarget 0 3 restart force restart force tick tick function dragended force alphaTarget 0 3 restart d3 select this attr stroke null d3 select this attr fill black force alphaTarget 0 3 restart force stop force restart script Grouping of forces script type text javascript src https d3js org d3 v7 min js script script src https cdn jsdelivr net npm d3 selection 3 script svg viewBox 0 20 300 300 script const svg d3 select svg set the dimensions and margins of the graph const width 200 const height 200 create dummy data just one element per circle const data name A group 1 name B group 1 name C group 1 name D group 1 name E group 1 name F group 1 name G group 2 name H group 2 name I group 2 name J group 2 name K group 2 name L group 2 name M group 3 name N group 3 name O group 3 A scale that gives a X target position for each group const x d3 scaleOrdinal domain 1 2 3 range 50 100 140 A color scale const color d3 scaleOrdinal domain 1 2 3 range F8766D 00BA38 619CFF Initialize the circle all located at the center of the svg area const node svg append g selectAll circle data data join circle attr r 9 attr cx width 2 attr cy height 2 style fill d color d group style fill opacity 0 8 attr stroke black style stroke width 2 call d3 drag call specific function when circle is dragged on start dragstarted on drag dragged on end dragended Features of the forces applied to the nodes var simulation d3 forceSimulation force x d3 forceX strength 0 5 x d x d group force y d3 forceY strength 0 1 y height 2 force center d3 forceCenter x width 2 y height 2 Attraction to the center of the svg area force charge d3 forceManyBody strength 1 Nodes are attracted one each other of value is 0 force collide d3 forceCollide strength 1 radius 9 iterations 1 Force that avoids circle overlapping Apply these forces to the nodes and update their positions Once the force algorithm is happy with positions alpha value is low enough simulations will stop simulation nodes data on tick function d node attr cx d d x attr cy d d y What happens when a circle is dragged function dragstarted event d if event active simulation alphaTarget 03 restart d fx d x d fy d y function dragged event d d fx event x d fy event y function dragended event d if event active simulation alphaTarget 03 d fx null d fy null script