block by timelyportfolio 3cc50e732e46c2f275181c939d899234

d3-bboxCollide Treemap

Full Screen

forked from emeeks‘s block: d3-bboxCollide

I forked this to see how it might work with boxes assigned a size and initial position by d3-hierarchy treemap. I definitely don’t think I have this figured out yet.


originial readme from emeeks

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