使用D3库进行动态过滤

Question

I am familiar with python, much less with javascript. I was given the task to have a visual representation of our network infrastructure. I decided I want to try to accomplish my task with D3 library within a web page.

My Python code works and deliver proper json data files, but sometimes there are just too much nodes and links to display, it's not very user friendly. I would like to add a table in the html page, where you can tick cases which will filter the data displayed.

Full working code I was inspired from is available here: https://networkgeekstuff.com/networking/network-topology-visualization-example-of-using-lldp-neighborships-netconf-and-little-python-javascript/

and the output: https://networkgeekstuff.com/article_upload/visualize/full/

From this code, I am able to add a "category" field to my nodes - in the json file-, and I would like that if the user tick the case, we only display the selected matching category(ies) dynamically.

Would that be simple ? I could not find any example I could be inspired from to work on it that would match the need.

Thanks

Answer 1

You could put an event listener for the change event on the checkbox, and then use the native filter array method in javascript to do this. There's an example here:

https://bl.ocks.org/johnnygizmo/3d593d3bf631e102a2dbee64f62d9de4