Allow multiple selecting nodes via a mouse selection area (3d-force-graph / ThreeJS)
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

Add mouse bounding box / window selection to this example:
https://bl.ocks.org/vasturiano/02affe306ce445e423f992faeea13521

Need to be able to get an event for the multiple selection.

https://github.com/vasturiano/3d-force-graph

https://github.com/vasturiano/3d-force-graph/issues/6

I think it would not be possible to achieve what you are willing to.Let me know what are your thoughts.Thank you
Codeword 17 days ago
awarded to Chlegou
Tags
three-js

Crowdsource coding tasks.

1 Solution

Winning solution
Tipped

Hi there,

Well, after viewing your links, it looks like you want to make a selectable nodes, within mouse animated graph,
which is impossible in theory! because, element container will have event listners who they are sensitives to mouse events.
Even WebGl API didn't support multi node select.

Instead, there is solution for this kind of problems.

there is few Graph pluguins that i know, supporting this kind of methods, like:

1/ GoJs: this library support multi select.

demo link: https://gojs.net/latest/extensions/Fishbone.html

advantages:

- infinite events!! really strong library!! even design can be changed (using HTML as an option).

disadvantages:

- multi select event isn't stable.

- it's not free! and it's not cheap at all!!

- bad design.

2/ LinkuriousJs: i found this example, which is a good one, supporting many multiple flexible drawable boxes.

demo link: https://github.com/Linkurious/linkurious.js/blob/linkurious-version/examples/select-and-drag-nodes.html

advantages:

- as i said, you can draw many sections as much as you want to select even non related parts from the graph. i really liked it! nice option!!

*Note: * i can't make support for it, i don't know it, i just find it. i don't know if we can animate it or not.
but we can give it a try. it's open source, so it have a documentation.

3/ VivaGraphJS: the example i'm giving, adding a bounding box, that will define the selected nodes, as you required.

demo link: http://anvaka.github.io/VivaGraphJS/demos/other/webgl-area-select/

github documentation for this example: https://github.com/anvaka/VivaGraphJS/tree/master/demos/other/webgl-area-select

(it explain how it works)

advantages:

- simple example and simple code implementation. it's really easy to use, and pretty algorithm

disadvantages:

- only one area can be selected at a time. (not like LinkuriousJs)

Solution:

i know how it's hard to change from library to another when developping, but sometime it's a hard choice to make.

GoJs isn't a good option even not free, and bad design, personally, i think LinkuriousJs is doing it perfectly, but isn't animated.
i know how the algorithm works, so if it's hard for you to make this change, and you really want the animation with mouse, i can help
implementing it, in a way to work with WebGL.

The main problem i have, i'm in last school year, and have a plenty school projects right now working on. i really don't have time,
to take this project and coding it.

instead, i can help you out working on it. we can make a video call, when i explain to you how to implement it.

this is my email: nicolastsue@gmail.com

i really want to help you out, but i'm sorry, this is what i can do. (by emailing me and making a video call, i can help you out more)

i just gave you all possible solutions, with a good demo options, hope you like them, and will be helpful for you :)

i know i'm not submitiing a solution, but i'm giving a nice hint instead ;)

a good tip will be enough for me ;)

Thank you for the tip! :) it was really nice from you. :) as i said before, i would be happy to help you out, if you email me, so we can arrange a video call, when we share ideas, and a simple algorithm solution that can help you with whatever method you have chosen. :)
Chlegou 20 days ago
Hi @mdavis95 , i have got notified that you rewarded the bounty for me, thank you for that! :) i'm wondering, how it's going for you? did you solve it? you have my email, please email me and keep me updated with your work, if you still want some help, i'm open for :) thanks again for rewarding me! :)
Chlegou 14 days ago