d3.jsグラフをフィルタリングするためのドロップダウンボタン

Question

私は、うまく機能し、ボタンクリック時のデータをフィルタリングするグラフを持っています。今、私は通常のボタンの代わりにドロップダウンボタンを使用しようとしています。ユーザーがドロップダウンから、1000年または2000のいずれかとして金額を選択すると、ノードとリンクは、プロパティ

d.total_amt> 1000 or d.total_amt > 2000 

HTML

<style> 
    .links line { 
    stroke: #999; 
    stroke-opacity: 0.6; 
    } 

    .nodes circle { 
    stroke: #fff; 
    stroke-width: 1.5px; 
    } 

    .nodes circle { 
    stroke: #fff; 
    stroke-width: 1.5px; 
    } 

    div.tooltip { 
    position: absolute; 
    background-color: white; 
    max-width: 200px; 
    height: auto; 
    padding: 1px; 
    border-style: solid; 
    border-radius: 4px; 
    border-width: 1px; 
    box-shadow: 3px 3px 10px rgba(0, 0, 0, .5); 
    pointer-events: none; 
    } 

</style> 
<svg id="Network_graph" width="400" height="350"></svg> 


    <label for="input ID">Amount</label> 
    <select id="select_ID" name="select_ID"> 
    <option value="1000">1000</option> 
    <option value="2000">2000</option> 
    </select> 
    <button id="full_data"> 
    full data 
    </button> 

JSON

var IDData = JSON.stringify([ 
    ["node/105173", "node/38180995", "Agent", "Customer", "1379644.0", 1, 264, "1374903"], 
    ["node/1061", "node/21373542", "Agent", "Customer", "530848.0", 1, 3000, "529502"], 
    ["node/10750", "node/59648369", "Agent", "Customer", "1454228.0", 1, 120, "1454118"], 
    ["node/10750", "node/78569210", "Agent", "Customer", "1425251.0", 1, 234, "1421416"], 
    ["node/10750", "node/96726118", "Agent", "Customer", "1376239.0", 1, 434, "1376152"], 
    ["node/10946829", "node/11190", "Customer", "Agent", "1409620.0", 20, 3380, "1406665"], 
    ["node/10946829", "node/57774036", "Customer", "Customer", "1460029.0", 3, 960, "1459731"], 
    ["node/109947", "node/97911872", "Agent", "Customer", "1323025.0", 1, 600, "1315582"],..]) 

に基づいてフィルタリングされるはずです

グラフをレンダリングするのに適した形式でこのデータを作成するコードを以下に示します。

var galData = JSON.parse(IDData); 
var startnodes = []; 
var endnodes = []; 
var startnodetype = []; 
var endnodetype = []; 
var PayTime = []; 
var TXN_COUNT = []; 
var Total_Amt = []; 
var SendTime = []; 
galData.map(function(e, i) { 
    startnodes.push(e[0]); 
    endnodes.push(e[1]); 
    startnodetype.push(e[2]); 
    endnodetype.push(e[3]); 
    PayTime.push(e[4]); 
    TXN_COUNT.push(e[5]); 
    Total_Amt.push(e[6]); 
    SendTime.push(e[7]); 
}); 
var final_data = createNodes(startnodes, endnodes, startnodetype, endnodetype, PayTime, TXN_COUNT, Total_Amt, SendTime); 
makeGraph("#Network_graph", final_data); 

このデータを使用して強制的なグラフを作成しました。 Jsfiddleは作業グラフへのリンクです。

今、データフィルタリングのドロップダウンを追加しようとしています。これはドロップダウンからの選択を保持するコードセクションです

d3.select(this) //right way to hold on to the selection or need some jquery? 
.selectAll("option") 
.filter(function(d, i) { 
    return this.selected; 
}); 

このコードでは、フィルタ関数を使用してノードとリンクをフィルタリングしています。

function isUnique(id, nodes) { 
     for (var i = 0; i < nodes.length; i++) { 
     if (nodes[i].id == id) { 
      return false; 
     } 
     } 
     return true; 
    } 

    var filtered_data = []; 
    var nodes = []; 
    var links = []; 
    d3.selectAll("line").filter(function(d, i) { 
    if (d.total_amt > this.value) { 
     if (isUnique(d.source.id, nodes)) { 
     nodes.push(d.source); 
     } 

     if (isUnique(d.target.id, nodes)) { 
     nodes.push(d.target); 
     } 
     links.push(d); 
    } 
    }); 
    filtered_data.links = links; 
    filtered_data.nodes = nodes; 
    filtered_data.nodetype = final_data.nodetype; 

    d3.select('#Network_graph').selectAll("*").remove(); 
    makeGraph("#Network_graph", filtered_data); 

上記のアプローチは意味がありますか？だから、これまではこれはうまくいきませんでした。私は欠けている部分が何であるか分からない。私はドロップダウンの方がうまくいくかもしれない他のアイデアも開いています。まだd3.js/javascriptの周りに私の方法を見つける。助けを楽しみにしています。ときあなたの選択オプションの変更何かをするために

var elem = document.getElementById('select_ID'); 
elem.addEventListener("change", onSelectChange); 

function onSelectChange(){ 
    var value = this.value; 
    var fdata = filteredData(value); 
    d3.select('#Network_graph').selectAll("*").remove(); 
    makeGraph("#Network_graph", fdata); 
} 

：

OK

Answer 1

は、ここでは、必要なコードです。要素を選択し、イベントリスナー（この場合は変更）をアタッチします。

var elem = document.getElementById('select_ID'); 
elem.addEventListener("change", onSelectChange); 

そして、この変更イベントの内部

は、すでに述べてきたよう this.valueで値を取得し、フィルタリングを行います。ここで

はフィドルです：再びhttps://jsfiddle.net/tgv6s5cd/14/