D3 js Force directed graph and data-tables integration

Does anyone know any practical example in D3-js to model a node/link graph from datatables ?
What I mean is once a user click on a specific table-row, the related graph is displayed below showing source & target node (as per row information) and the connecting link - I understood should be a mouse click event that calls a handler at very very high level…

Example of Table row:

Source - Target - Value : A B 10

Example of datatables :https://datatables.net/examples/advanced_init/events_live.html Example of forced directed graph :http://bl.ocks.org/ericcoopey/6c602d7cb14b25c179a4 Thx in advance for the help.

Greetings!

Yes indeed. The mouse click listener should be attached to the data table. When that handler gets invoked, that logic needs to make the changes to the graph visualization that you desire. From how you describe it, it seems that the graph data itself will not need to change (meaning the layout of the nodes and links will stay the same), only you want to highlight something in the graph based on what is clicked? In that case, the click handler can call a function that selects the elements you want to highlight and change their color or whatever you want to do to indicate that they are the ones selected.

A sketch/mockup of the desired view after clicking would be helpful as well, to make sure folks really understand what you are trying to do. Also the technical approach depends on what frameworks you are using - if React is in play you could put the highlight logic in a useEffect call, if it’s purely D3 you’ll want to either make an idempotent function that can be invoked with the configured state again and again, or write one function to set up the graph and a separate function to do the highlighting (the latter approach is probably simpler).

Also, another option for getting help is to ask this question in the D3 Slack #help channel https://d3-slackin.herokuapp.com/ There is a great community there that is very helpful in cases like this.

Good luck!