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 文件中向我的节点添加一个“类别”字段，并且我希望如果用户勾选此情况，我们只动态显示所选的匹配类别.

这样简单吗？我找不到任何可以激发我灵感的例子来满足需要。

谢谢

Answer 1

您可以为change event放置一个事件监听器在复选框上，然后使用 native filter javascript 中的数组方法可以做到这一点。这里有一个例子:

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