根据基于下拉列表的JSON属性过滤d3 SVG

Question

我有力导向图的节点和链接数据。 节点之间可能有一个，两个或三个链接：

{"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>

我已将此下拉菜单合并到我的d3代码中：

var dropdown = d3.select("#selectLinkNumber")
var change = function() {
d3.selectAll("svg > *").remove()
var val = dropdown.node().options[dropdown.node().selectedIndex].value;

d3.json("test.json", function(error, graph) {
    //do stuff
    })
}
dropdown.on("change", change)
change();

这将导致图形被删除，并在下拉菜单中进行新选择时重新显示。 目的是仅显示值大于或等于选择的节点。 例如，如果选择“三个”，则仅显示安吉拉，德怀特及其三个链接。 如果选择“两个”，则选择Pam，Kevin，Angela，Dwight及其相应的链接。

从逻辑上讲，我认为需要有一些过滤test.json后直接数据d3.json("test.json", function(error, graph) {线的基础上， val 。我不知道如何有效地这个例子（ https://jsfiddle.net/tgv6s5cd/14/ ）基本上可以满足我的要求，但我无法超越手动数据创建和众多功能的范围。引入test.json后，只过滤一次test.json

用户选择下拉菜单后，应如何过滤数据？

Answer 1

那是Javascript中的基本数组操作。 graph毕竟只是一个具有两个数组属性的对象。

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
})