| license: mit |
The force graph is constrained within the box. Click [here] (http://www.puzzlr.org/bounding-box-force-directed-graph/) for an explanation of this effect.
This is done through the tick function's constraints - one of two simple ways you could do it. The other is through custom forces.
forked from puzzler10's block: Bounding box force directed graph I
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style> | |
| .links line { | |
| stroke: #d8d8d8; | |
| stroke-opacity: 0.6; | |
| stroke-width: 2; | |
| stroke-dasharray: 10, 6; | |
| } | |
| .nodes circle { | |
| fill: #00ceb9; | |
| stroke: white ; | |
| stroke-width: 5px; | |
| } | |
| svg { | |
| border: 1px solid #d8d8d8; | |
| } | |
| </style> | |
| <svg width="1000" height="400"></svg> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <script> | |
| const svg = d3.select("svg"); | |
| const width = +svg.attr("width"); | |
| const height = +svg.attr("height"); | |
| const animate = false; | |
| const nodeRadius = 25; | |
| const data = { | |
| nodes: [ | |
| {"name": "Gordon", "sex": "M"}, | |
| {"name": "Sylvester", "sex": "M"}, | |
| {"name": "Lillian", "sex": "F"}, | |
| {"name": "Mary", "sex": "F"}, | |
| {"name": "Helen", "sex": "F"}, | |
| {"name": "Jamie", "sex": "M"}, | |
| {"name": "Jessie", "sex": "F"}, | |
| {"name": "Ashton", "sex": "M"}, | |
| {"name": "Duncan", "sex": "M"}, | |
| {"name": "Evette", "sex": "F"} | |
| ], | |
| links: [ | |
| {"source": "Sylvester", "target": "Lillian", "type":"A" }, | |
| {"source": "Gordon", "target": "Lillian", "type":"A" }, | |
| {"source": "Lillian", "target": "Mary", "type":"A"}, | |
| {"source": "Mary", "target": "Helen", "type":"A"}, | |
| {"source": "Helen", "target": "Jessie", "type":"A"}, | |
| {"source": "Sylvester", "target": "Helen", "type":"A"}, | |
| {"source": "Helen", "target": "Jamie", "type":"A"}, | |
| {"source": "Jamie", "target": "Jessie", "type":"A"}, | |
| {"source": "Ashton", "target": "Jessie", "type":"A"}, | |
| {"source": "Ashton", "target": "Jamie", "type":"A"}, | |
| {"source": "Gordon", "target": "Jessie", "type":"A"}, | |
| {"source": "Jessie", "target": "Duncan", "type":"E"}, | |
| {"source": "Jessie", "target": "Evette", "type":"A"} | |
| ] | |
| }; | |
| // Set up the simulation | |
| const strengthX = animate ? -0.19 : -0.19; | |
| const strengthY = animate ? -0.22 : -0.14; | |
| const simulation = d3.forceSimulation().nodes(data.nodes); | |
| const forceX = d3.forceX(width/2).strength(strengthX); | |
| const forceY = d3.forceY(height/2).strength(strengthY); | |
| const chargeForce = d3.forceManyBody().strength(-3000); | |
| const centerForce = d3.forceCenter(width / 2, height / 2); | |
| const linkForce = d3.forceLink(data.links).id(d => d.name).distance(180).strength(1.8); | |
| // Add positioning forces to the simulation | |
| simulation | |
| .force('xAxis', forceX) | |
| .force('yAxis', forceY) | |
| .force("charge_force", chargeForce) | |
| .force("center_force", centerForce) | |
| .force("links", linkForce); | |
| //draw lines for the links | |
| const link = svg.append("g") | |
| .attr("class", "links") | |
| .selectAll("line") | |
| .data(data.links) | |
| .enter().append("line"); | |
| //draw circles for the nodes | |
| const node = svg.append("g") | |
| .attr("class", "nodes") | |
| .selectAll("circle") | |
| .data(data.nodes) | |
| .enter() | |
| .append("circle") | |
| .attr("r", nodeRadius); | |
| if (!animate) { | |
| simulation.stop(); | |
| const min = Math.log(simulation.alphaMin()); | |
| const decay = Math.log(1 - simulation.alphaDecay()); | |
| const numTicks = Math.ceil(min / decay); | |
| // Run the simulation enough times to position nodes | |
| for (let i = 0; i < numTicks; ++i) { | |
| simulation.tick(); | |
| }; | |
| // Position the nodes | |
| tickActions() | |
| } else { | |
| simulation.on("tick", tickActions ); | |
| } | |
| function tickActions() { | |
| //constrains the nodes to be within a box | |
| node | |
| .attr("cx", d => d.x = Math.max(nodeRadius, Math.min(width - nodeRadius, d.x))) | |
| .attr("cy", d => d.y = Math.max(nodeRadius, Math.min(height - nodeRadius, d.y))); | |
| link | |
| .attr("x1", d => d.source.x) | |
| .attr("y1", d => d.source.y) | |
| .attr("x2", d => d.target.x) | |
| .attr("y2", d => d.target.y); | |
| } | |
| </script> |
