block by emeeks 7669aa65a172bf69688ace5f6041223d

d3-bboxCollide

Full Screen

d3-bboxCollide provides bounding box collision detection for d3.forceSimulation. 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 is passed into the d3.bboxCollide function, which is later passed as a “collide” constraint in your force settings.

var collide = d3.bboxCollide(function (d,i) {
    return [[-d.value * 10, -d.value * 5],[d.value * 10, d.value * 5]]
  })

The code above creates a rectangle scaled to the size of the randomized data. The data determines the y position creating a sort of rectilinear beeswarm plot.

index.html

collide.js