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: 18px;
    stroke: #dadada;
    opacity: .4;
    background: white;
    font-weight: bold;
  }

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

const data = {
  nodes: [
    { name: 'Remote Services', status: 'up' },
    { name: 'Recalls & Campaigns', status: 'up' },
    { name: 'Vehicle Data', status: 'down' },
    { name: 'Registration', status: 'down' },
    { name: 'UBI', status: 'down' },
    { name: 'Provisioning', status: 'up' },
    { name: 'Dealer Services', status: 'down' },
    { name: 'Accident Advisor', status: 'up' },
    { name: 'Notification Services', status: 'up' },
    { name: 'Can300', status: 'down' }
  ],
  links: [
    { source: 'Recalls & Campaigns', target: 'Vehicle Data', failures: '10' },
    { source: 'Remote Services', target: 'Vehicle Data', failures: '1290' },
    { source: 'Vehicle Data', target: 'Registration', failures: '0' },
    { source: 'Registration', target: 'UBI', failures: '0' },
    { source: 'UBI', target: 'Dealer Services', failures: '1.8k' },
    //{ source: 'Registration', target: 'Dealer Services', failures: '0' },
    { source: 'UBI', target: 'Provisioning', failures: '0' },
    { source: 'Provisioning', target: 'Dealer Services', failures: '2.1k' },
    { source: 'Provisioning', target: 'Accident Advisor', failures: '0' },
    //{ source: 'Accident Advisor', target: 'Dealer Services', failures: '0' },
    { source: 'Accident Advisor', target: 'Notification Services', failures: '0' },
    { source: 'Accident Advisor', target: 'Can300', failures: '0' }
  ]
  };

// Set up the simulation 
  const strengthX =  -0.007;
  const strengthY =  0.016;
  const charge = -304;
  const dist = 142;
  const lineStrength = 1.5;
  
  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(charge);
  const centerForce = d3.forceCenter(width / 2, height / 2);
  const linkForce =  d3.forceLink(data.links).id(d => d.name).distance(dist).strength(lineStrength);

// 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