使用D3库进行动态过滤

时间:2019-03-14 12:47:50

标签: javascript d3.js network-programming

我熟悉python,更不用说javascript。我的任务是直观地了解我们的网络基础架构。我决定要尝试通过网页中的D3库完成任务。

我的Python代码可以正常工作并提供适当的json数据文件,但是有时要显示的节点和链接太多,这不是非常用户友好。我想在html页面中添加一个表格,您可以在其中勾选要过滤显示数据的案例。

我从中受到启发的完整工作代码可在以下位置找到:https://networkgeekstuff.com/networking/network-topology-visualization-example-of-using-lldp-neighborships-netconf-and-little-python-javascript/

和输出:https://networkgeekstuff.com/article_upload/visualize/full/

通过此代码,我能够在json文件中的节点上添加“类别”字段,并且我希望如果用户勾选了这种情况,我们只会动态显示所选的匹配类别

那会简单吗?我找不到任何可以激发需要的示例,可以满足需要。

谢谢

1 个答案:

答案 0 :(得分:2)

您可以在复选框上放置change event的事件侦听器,然后使用javascript中的本机filter数组方法执行此操作。这里有一个例子:

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