Bounding box force directed graph 3 (with metadata)

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;
  }
  
  .label__node {
    font-family: sans-serif;
    font-size: 19px;
    stroke: #dadada;
    opacity: .4;
    background: white;
    font-weight: bold;
  }
  
  .label__error {
    font-family: sans-serif;
    font-size: 14px;
    fill: 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", "failures":"10" },
      {"source": "Gordon", "target": "Lillian", "failures":"1290" },
      {"source": "Lillian", "target": "Mary", "failures":"0"},
      {"source": "Mary", "target": "Helen", "failures":"0"},
      {"source": "Helen", "target": "Jessie", "failures":"1.8k"},
      {"source": "Sylvester", "target": "Helen", "failures":"0"},
      {"source": "Helen", "target": "Jamie", "failures":"0"},
      {"source": "Jamie", "target": "Jessie", "failures":"2.1k"},
      {"source": "Ashton", "target": "Jessie", "failures":"0"},
      {"source": "Ashton", "target": "Jamie", "failures":"0"},
      {"source": "Gordon", "target": "Jessie", "failures":"0"},
      {"source": "Jessie", "target": "Duncan", "failures":"0"},
      {"source": "Jessie", "target": "Evette", "failures":"0"}
    ]
  };

// 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);
  
  //const widthScale = d3.scaleLinear.domain([24,])

// 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", "label__node")
    .attr('x', d => 0 - nodeRadius - 4  - d.name.length/2)
    .attr('y', 0 - nodeRadius - 8);

const statusBox = svg.append("g")
  	.attr("class", "boxes")
  	.selectAll("g")
  	.data(data.links)
  	.enter().append("g");

statusBox.append("rect")
    .attr("x", -2).attr("y", -23)
  	.attr("rx", 5).attr("ry", 5)
  	.attr("width", d => {
    	return d.failures.length + 30 + Math.log(d.failures.length) * 13;
  	})
    .attr("height", 30)
    .style("fill", d => {
    	return d.failures === '0' ? '#e3e3e3' : '#f9507f';
  	})
    .attr("class", "status-box");

statusBox.append("text")
  	.text(d => d.failures)
  	.attr("x", d => 9 + (Math.log(d.failures.length) * 0.2))
    .attr("y", -3)
  	.attr("class", "label__error")
  
  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);

statusBox.attr("transform", d => {
      const x = (d.target.x + d.source.x) / 2;
      const y = (d.target.y + d.source.y) / 2;
      return "translate(" + x + "," + y + ")";
    });

}

</script>

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