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.
https://d3js.org/d3.v4.min.js