javascript - 使用 D3 库进行动态过滤

Question

我熟悉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 文件中 - 我希望如果用户勾选这个案例，我们只动态显示选定的匹配类别。

那会很简单吗？我找不到任何可以激发我灵感的例子来满足需求。

谢谢

标签： javascriptd3.jsnetwork-programming

Answer 1

您可以在复选框上放置一个更改事件的事件侦听器，然后使用 javascript 中的本机过滤器数组方法来执行此操作。这里有一个例子：

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