BBox Collision Detection

d3.forceSimulation bounding box collision detection. This is useful for label adjustment or rectangular nodes. Each node receives a bounding box array of a top right and bottom left corner of that node relative to its x position. In the case of this dataset, that size is based on the length of the word in the source dataset.

A function for calculating this array based off the data isis passed into the forceRectCollide function, which is later passed as a “collide” constraint in your force settings.

var collide = d3.forceRectCollide(function (d,i) {
    var hw = halfWidth(d)
    if (i%3 === 0) {
      return [[-hw / 2, -hw],[hw / 2, hw]]
    }
    return [[-hw, -hw / 2],[hw,hw / 2]]
  })
  .strength(1)
  .iterations(2)

The code above creates a vertical or horizontal rectangle. Make sure you make your corresponding on-screen rectangle match the size of your constraint.