Javascript 基于下拉列表按JSON属性过滤d3 SVG

我有一个力定向图的节点和链接数据。节点之间可以有一个、两个或三个链接：

{"nodes": [{"id": "Michael Scott", "numOfLinks": 1}
          ,{"id": "Jim Halpert", "numOfLinks": 1}
          ,{"id": "Pam Beasley", "numOfLinks": 2}
          ,{"id": "Kevin Malone", "numOfLinks": 2}
          ,{"id": "Angela", "numOfLinks": 3}
          ,{"id": "Dwight Schrute", "numOfLinks": 3}]
,"links": [{"source": "Michael Scott", "target": "Jim Halpert", "type": "red"}
          ,{"source": "Pam Beasley", "target": "Kevin Malone", "type": "red"}
          ,{"source": "Pam Beasley", "target": "Kevin Malone", "type": "white"}
          ,{"source": "Angela", "target": "Dwight Schrute", "type": "red"}
          ,{"source": "Angela", "target": "Dwight Schrute", "type": "white"}
          ,{"source": "Angela", "target": "Dwight Schrute", "type": "blue"}]
}

我有一个HTML下拉列表供用户筛选出没有一定数量链接的节点（和相应的链接）：

<select id="selectLinkNumber" name="selectLinkNumber">
     <option value="1">All</option>
     <option value="2">Two or More Links</option>
     <option value="3">Three or More Links</option>
</select>

这将导致图形被删除，并在从下拉列表中进行新选择时重新显示。目标是只显示值大于或等于所选内容的节点。例如，如果选择“三”，则只显示Angela、Dwight及其三个链接。如果选择“两个”，则选择Pam、Kevin、Angela、Dwight及其相应的链接

从逻辑上讲，我认为需要有一些东西来过滤

test.json

数据，直接在

d3.json（“test.json”），function（error，graph）{

行之后，基于

val

。但是我不确定如何有效地完成这一点。这个例子（）基本上就是我想要的，但我无法通过手动数据创建和大量函数来实现。我认为在引入

test.json

---

一旦用户做出下拉选择，我应该如何过滤数据？

这是Javascript中的基本数组操作。

图形毕竟只是一个具有两个数组属性的对象

d3.json("test.json", function(error, graph) {
    var filteredNodes = graph.nodes.filter(d => d.numOfLinks >= val);
    var names = filteredNodes.map(d => d.id);
    var filteredLinks = graph.links.filter((d) => {
        return (names.indexOf(d.source) >= 0) || 
               (names.indexOf(d.target) >= 0)
    });

    var filteredGraph = {
        nodes: filteredNodes,
        links: filteredLinks
    };
    // render
})

非常感谢您的帮助。如果链接数组中有
value
，该代码将如何更改？我将第一行更改为
var filteredLinks=graph.links.filter（d=>d.numOfLinks>=val）；
，我相信
var filteredGraph
将保持不变。只是不确定如何映射回节点，因为它们只有
id
，而没有
源
和
目标
。
d3.json("test.json", function(error, graph) {
    var filteredNodes = graph.nodes.filter(d => d.numOfLinks >= val);
    var names = filteredNodes.map(d => d.id);
    var filteredLinks = graph.links.filter((d) => {
        return (names.indexOf(d.source) >= 0) || 
               (names.indexOf(d.target) >= 0)
    });

    var filteredGraph = {
        nodes: filteredNodes,
        links: filteredLinks
    };
    // render
})