title: D3.js Making multiple selections from a checkbox and filter the nodes and links based on the selection
body: <p>I am looking to modify my existing my forced directed graph and make it a bit more flexible. 
  Below is the <a href="http://jsfiddle.net/vishy1988/tgv6s5cd/19/" rel="nofollow noreferrer">Jsfiddle</a>. Right now there are radio buttons to control the opacity of nodes and links. There are 4 node types:</p>
  
  <pre><code>   Agent,Customer,Phone,ID_Card
  </code></pre>
  
  <p>Clicking on either radio buttons will reduce the opacity of all the nodes and links except the selected node and it's incoming and outgoing links.</p>
  
  <p>I am trying to add checkboxes instead of a radio button so that multiple selections can be made. </p>
  
  <p>So , for instance if s is the set of selections then you will make any node opaque where node in s
  and any links opaque where start_node in s AND end_node in s.</p>
  
  <p>For example if "Customer" and "Agent" nodes are selected then all the Customer,Agent nodes should be opaque and as well as all the links between them. </p>
  
  <p>If "Customer" , "Agent", "ID_Card" is selected all the 3 nodes and all the links between "Customer" and "Agent" , "Agent" and "ID_Card" and "Customer" and "ID_card" should be opaque. </p>
  
  <p>Also , unchecking of the nodes should be handled and graph should get filtered accordingly</p>
  
  <p>Below is the <strong>HTML</strong>:</p>
  
  <pre><code>      &lt;div id="map"&gt;&lt;/div&gt;
        &lt;div id="legend"&gt;
    &lt;h3&gt;Filter&lt;/h3&gt;
    &lt;div class="input-group" id="filters"&gt;
    &lt;script&gt;/*&lt;&lt;label&gt;
        &lt;input type="checkbox" name="filter" value="all" &gt; All&lt;/label&gt;
      &lt;br /&gt;
      &lt;label&gt;
    &lt;input type="checkbox" name="filter" value="Customer"&gt; type=Customer&lt;/label&gt;
      &lt;label&gt;
        &lt;input type="checkbox" name="filter" value="Phone"&gt; type=Phone&lt;/label&gt;
     &lt;br /&gt;
     &lt;label&gt;
     &lt;input type="checkbox" name="filter" value="ID_Card"&gt; type=ID_Card&lt;/label&gt;
     &lt;br /&gt;
  </code></pre>
  
  <p>Below is my <strong>JSON</strong></p>
  
  <pre><code>    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"],...])
  </code></pre>
  
  <p>I parse through this dynamic JSON data and make it in a format suitable to render the graph with the below piece of javascript code:</p>
  
  <pre><code>         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);
  </code></pre>
  
  <p>In order to make the checkbox work I have tried below piece of code:</p>
  
  <pre><code>     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 &lt; 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");
  
          }}})
  </code></pre>
  
  <p>This piece should filter the nodes and only keep the checked nodes as opaque:</p>
  
  <p>using a similar approach I plan to keep the selected links opaque:</p>
  
  <pre><code>link.filter(function(d) {
        return d.source.type != value[i] &amp;&amp;
          d.target.type != value[i];
      })
      .style("opacity", "0.2");
  
    link.filter(function(d) {
        return d.source.type == value[i] &amp;&amp;
          d.target.type == value[i];
      })
      .style("opacity", "1");
  }
  </code></pre>
  
  <p>But I am not getting this to work. Still learning Javascript/d3.js. So , looking for help.</p>