Non-overlapping nodes without .d3Force('charge')

[turhanberk]

I am building a network with custom nodes, where nodes can get big and their sizes vary. When I have many nodes, as expected, they overlap, like in the screenshot below.

The number of colors and node size will change via user input, but the number of partitions and colors will hold an important biological value on the project I'm working on. Hence, I need all the nodes separate from each other. I carefully read the documentation and looked at the issues. I have tried adjusting .d3Force('charge') to make sure nodes do not overlap, but it just disperses everything, which is not optimal. I have also tried to utilize node collision to make nodes collide with each other until they are not overlapping, but network seems to move out from the screen when i use .d3Force('collide',d3.forceCollide(Graph.nodeRelSize())).

I wanted to ask what would be the best way to make sure nodes will not overlap with each other no matter their sizes, since their shapes and colors are the key factors in our network visualization.

Thanks a lot in advance! I am also using the 3D version of the library, and now trying to have conversion between 2D-3D networks but only problem lies in the overlapping nodes. Amazing job on both of the libraries!

[vasturiano]

@turhanberk thanks for reaching out.

Since your nodes are rectangular shaped, you might get quite good results by adding a bboxCollide force plugin to your system:
https://github.com/emeeks/d3-bboxCollide

[turhanberk]

@vasturiano this is more than perfect! It works flawlessly, thanks a lot for the suggestion!

[joric]

@turhanberk I'm having troubles with the plugin, could you please tell how to use it? It doesn't seem to work properly if I add a single line, does it need more? Also, is it possible to update dimensions in real time (I load images asynchronously)? It looks like callback is called only once in the beginning.

Graph.d3Force('collide', d3.bboxCollide(function(d){ return [[-d.w/2,-d.h/2],[d.w/2,d.h/2]]; }))