Bounding box force directed graph 2 (with labels)

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

forked from newsummit's block: Bounding box force directed graph I

forked from newsummit's block: Bounding box force directed graph 2 (with labels)

<!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;
  }
  
  .labels {
    font-family: sans-serif;
    font-size: 20px;
    stroke: #dadada;
    opacity: .4;
    background: white;
    font-weight: bold;
  }

svg {
    border: 1px solid #d8d8d8;
  }
</style>

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 =  -0.08;
  const strengthY =  0.017;
  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(-1751);
  const centerForce = d3.forceCenter(width / 2, height / 2);
  const linkForce =  d3.forceLink(data.links).id(d => d.name).distance(180).strength(1.656);

// 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("g")
    .data(data.nodes)
    .enter().append("g");

const circles = node
    .append("circle")
    .attr("r", nodeRadius);

const labels = node.append("text")
    .text(d => d.name)
  	.attr("class", "labels")
    .attr('x', d => 0 - nodeRadius - d.name.length/2)
    .attr('y', 0 - nodeRadius - 5);
  
  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("transform", d => {
      const x = Math.max(nodeRadius, Math.min(width, d.x));
      const y = Math.max(nodeRadius, Math.min(height, d.y));
      return "translate(" + x + "," + 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>

https://d3js.org/d3.v4.min.js