D3.js Создание нескольких выборов из флажка и фильтрация узлов и ссылок на основе выбора

Question

Я ищу, чтобы изменить существующий мой вынужденный ориентированный граф и сделать его немного более гибким. Ниже приведено Jsfiddle. Прямо сейчас есть переключатели для управления непрозрачностью узлов и ссылок. Есть 4 типа узлов:

Agent,Customer,Phone,ID_Card 

Нажатие на любой радиокнопок будет уменьшить непрозрачность всех узлов и соединений, за исключением выбранного узла и его входящие и исходящие ссылки.

Я пытаюсь добавить флажки вместо переключателя, чтобы можно было сделать несколько выборов.

Так, например, если s - это набор выборок, то вы сделаете любой узел непрозрачным, если узел в s , и любые ссылки, непрозрачные, где start_node в s И end_node в s.

Например, если выбраны узлы «Клиент» и «Агент», все узлы «Клиент», «Агент» должны быть непрозрачными, а также всеми связями между ними.

Если «Клиент», «Агент», «ID_Card» выбраны все 3 узла и все ссылки между «Заказчиком» и «Агентом», «Агент» и «ID_Card» и «Клиент» и «ID_card», должно быть непрозрачным.

Кроме того, убрав из узлов должны быть обработаны и график должны быть отфильтрованы соответственно

Ниже HTML:

 <div id="map"></div> 
     <div id="legend"> 
    <h3>Filter</h3> 
    <div class="input-group" id="filters"> 
    <script>/*<<label> 
     <input type="checkbox" name="filter" value="all" > All</label> 
    <br /> 
    <label> 
    <input type="checkbox" name="filter" value="Customer"> type=Customer</label> 
    <label> 
     <input type="checkbox" name="filter" value="Phone"> type=Phone</label> 
    <br /> 
    <label> 
    <input type="checkbox" name="filter" value="ID_Card"> type=ID_Card</label> 
    <br /> 

Ниже мой 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"],...]) 

Я анализирую эти динамические данные JSON и делаю это в формате, подходящем для ren дер график с ниже кусок яваскрипта кода:

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

Для того, чтобы сделать флажок работы я попытался ниже фрагмент кода:

 d3.selectAll("input[name=filter]").on("change", function(d) { 
    var filter = document.getElementsByName('filter') 

    var value = [] 

    var value[i]= this.value; 

    node.style("opacity", 1); 
    link.style("opacity", 1); 
for(var i = 0; i < filter.length; ++i) { 
if filter[i].checked { 
    if (value[i] !== "all") { 
     node.filter(function(d) { 
      return d.type != value[i]; //this 
     }) 
     .style("opacity", "0.2"); 

     }}}) 

Эта часть должна фильтровать узлы и только держать проверил узлы как непрозрачный:

, используя подобный подход я планирую сохранить выбранные ссылки непрозрачны:

link.filter(function(d) { 
     return d.source.type != value[i] && 
     d.target.type != value[i]; 
    }) 
    .style("opacity", "0.2"); 

    link.filter(function(d) { 
     return d.source.type == value[i] && 
     d.target.type == value[i]; 
    }) 
    .style("opacity", "1"); 
} 

Но я не понимаю, как это работает. Все еще изучая Javascript/d3.js. Итак, ища помощи.

Answer 1

При работе с флажками вы должны осмотреть все из них, чтобы узнать, какой из них проверен, а какой нет. Прямо сейчас, ваш код имеет дело с флажками, как если бы они были переключателями.

Решение проблемы.Внутри функции .on("change", мы обнаружим, что флажки проверяются:

function getCheckedBoxes(chkboxName) { 
    var checkboxes = document.getElementsByName(chkboxName); 
    var checkboxesChecked = []; 
    for (var i = 0; i < checkboxes.length; i++) { 
     if (checkboxes[i].checked) { 
      checkboxesChecked.push(checkboxes[i].defaultValue); 
     } 
    } 
    return checkboxesChecked.length > 0 ? checkboxesChecked : " "; 
} 

И тогда мы будем заполнять массив (здесь названный checkedBoxes):

var checkedBoxes = getCheckedBoxes("checkb"); 

Используя этот массив, мы установим непрозрачность ваших узлов и связей:

node.filter(function(d) { 
     return checkedBoxes.indexOf(d.type) < 0; 
    }) 
    .style("opacity", "0.2"); 

link.filter(function(d) { 
     return checkedBoxes.indexOf(d.source.type) < 0 && 
      checkedBoxes.indexOf(d.target.type) < 0; 
    }) 
    .style("opacity", "0.2"); 

link.filter(function(d) { 
     return checkedBoxes.indexOf(d.source.type) > -1 && 
      checkedBoxes.indexOf(d.target.type) > -1; 
    }) 
    .style("opacity", "1"); 

Вот ваша обновленная скрипка: http://jsfiddle.net/jcbpvev6/

PS: вам нужно создать специальное условие для флажка «Все».