Выпадающая кнопка для фильтрации графа 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 - это ссылка на рабочий график.

Теперь я пытаюсь добавить drop down для фильтрации данных. Это раздел кода, который проводит на выбор из выпадающего

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. С нетерпением ждем некоторой помощи.

Answer 1

OK

Вот код, который нужно:

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

Для того, чтобы сделать что-то, когда ваш выберите вариант изменения. Выберите элемент и присоедините к нему прослушиватель событий (изменение в этом случае).

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

И в этом случае изменения получить значение с this.value, как вы уже сказали, и сделать фильтрацию.

Вот скрипка: https://jsfiddle.net/tgv6s5cd/14/