I am developing force directed graph in JavaScript and WebGL. My concern is draggable feature like one in d3.js.

For that I want to first achieve the selection of node in the graph which I am not able to figure out how to select it.

My node and edge data are array of property of each node which is position x and y whereas edge array is array of target and destination node.

I want to implement the feature where I can drag the node in the graph with mouse pointer.

One naïve way of thinking is to listen to mouse click event and its mouse location. With that location, iterate over all the nodes location to find if any node is selected. I am pretty sure that would take lot of computation power and time. I don't know if there is any way to achieve this smartly even in this way of implementation.

I don't know if I am correct or not but since d3 use the circle element to represent the node and listen the mouse event in that event handling. Please correct me if I am wrong.

I will be grateful for any kind of feedback or suggestion or guidance. Thank you in advance.