D3 js Collision detection for different shapes and Foreign Objects

[Lyle Kirby]

I'm fairly new to D3 and have been tasked with developing a force directed graph, however this diagram is unlike any examples I have found and I seem to have encountered quite a few issues.

I'm trying to develop something like this:

http://www.huzzahstudios.com/images/profile_page_simple.jpg

The biggest problem I am having so far is that the nodes containing text tend to overlap quite considerably and collision detection on the shape they form does not seem to be functioning as expected.

Basically I need:

- Nodes to never overlap in resolved state
- Nodes to resolve in similar locations (as per diagram above)
- Graph to be able to adapt acceptably depending on amount of data

This is what I have so far: http://jsfiddle.net/lucidlyle/SwV9s/4/

As you can see it's very messing at the moment, any help with this matter would be most appreciated.

Thanks

[Chris Viau]

The problem with FD layout is it's non-deterministic, so you can't hope it will take the same configuration each time. Setting an initial postions to the nodes can help. But maybe you need a simpler approach since your graph is a fairly simple diagram (like setting an initial layout and resolving collision with a custom function or a bubble layout)? Let me know if you need more details.

--
You received this message because you are subscribed to the Google Groups "d3-js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to d3-js+un...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[Lyle Kirby]

Thanks for your reply Chris, I think I've been able to accomplish what I was trying to do by playing around with and adjusting the link charge, distance and strength... I found the comment by Mike Bostock very helpful here (https://groups.google.com/forum/#!searchin/d3-js/collision$20detection/d3-js/2Gv50OwCBv4/DWt-hqqPuakJ). I've used very minimal collision detection and combined elements from these two examples to get the graph to sit in a similar fashion to my graphical example - http://bl.ocks.org/mbostock/1021953 and http://bl.ocks.org/ilyabo/2585241... It's still not perfect but it's getting there.