フィルタd3 JSONによるSVG属性ドロップダウンに基づく

Question

強制的なグラフのノードとリンクのデータがあります。

：リンクの特定の数を持っていない私はHTMLノード（および対応するリンク）をフィルタリングするユーザーのためのドロップダウン持って

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

：ノードは、1つ、2つ、またはそれらの間の3つのリンクを有することができます私は私のD3コードにこのドロップダウンが組み込まれている

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

：

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(); 

これが除去されたグラフになり、新たな選択は、ドロップダウンから作られたときに再表示されます。目的は、選択範囲以上の値を持つノードのみを表示することです。たとえば、「Three」を選択すると、Angela、Dwight、および3つのリンクのみが表示されます。 "Two"を選択すると、Pam、Kevin、Angela、Dwight、および対応するリンクが選択されます。

論理的には、valに基づいてd3.json("test.json", function(error, graph) {行の直後にtest.jsonデータをフィルタリングするものが必要であると思います。しかし、これを効率的に達成する方法はわかりません。この例（https://jsfiddle.net/tgv6s5cd/14/）は本質的に私が探しているものですが、私は手作業によるデータ作成と多数の機能を超えた方法を理解することができませんでした。取り込んだ後に一度フィルタリングするほうが簡単だと思いますtest.json

ユーザーがドロップダウンを選択したら、どのようにデータをフィルタリングすればよいですか？

Answer 1

これはJavascriptでの基本的な配列操作です。結局のところは2つの配列プロパティを持つ単なるオブジェクトです。

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