date time parsing and filtering for a d3.js force directed graph
<p>I have a d3.js graph wth a number of filters. I am trying to add one last filter based on date and time.</p>

<p><strong>JSON Data</strong></p>

<pre><code>     var IDData = JSON.stringify([
  ["C2", "ID2", "Customer", "ID_Card", "2014-12-30 12:45:46 ", "2015-1-1 15:00:00", 500.0, 2],
  ["C2", "ID2", "Customer", "ID_Card", "2015-1-2 13:44:45", "2015-1-3 16:45:32", 700.0, 2],
  ["C2", "C3", "Customer", "Customer", "2015-1-1 14:23:32", "2015-1-3 16:58: 43", 500.0, 2],
  ["C2", "C3", "Customer", "Customer", "2015-1-2 13:23:32", "2015-1-4 13:00:00", 600.0, 2],
  ["C6", "C1", "Customer", "Customer", "2015-1-5 11:17:21", "2015-1-7 19:43:43", 500.0, 1],
  ["C5", "ID4", "Customer", "ID_Card", "2015-1-8 7:45:43", "2015-1-10 9:00:00", 500.0, 2],
  ["C1", "ID1", "Customer", "ID_Card", "2015-1-6 19:44:43", "2015-1-8 11:10:47", 500.0, 1],
  ["C1", "P1", "Customer", "Phone", "2015-1-9 9:43:32", "2015-1-10 12:16:48", 500.0, 1],
  ["C6", "P2", "Customer", "Phone", "2015-1-13 13:45:56", "2015-1-15 14:47:23", 500.0, 2],
  ["C6", "P2", "Customer", "Phone", "2015-1-16 14:23:35", "2015-1-18 11:15:45", 800.0, 2],

  ["C2", "C6", "Customer", "Customer", "2015-1-10 12:44:43", "2015-1-11 13:32:45", 500.0, 1],
  ["C4", "C3", "Customer", "Customer", "2015-1-10 10:45:54", "2015-1-11 3:45:53", 500.0, 3],
  ["C1", "C2", "Customer", "Customer", '2015-1-7 6:55:32', "2015-1-8 7:43:32", 500.0, 1],
  ["C4", "ID3", "Customer", "ID_Card", "2015-1-6 8:47:12", "2015-1-7 9:10:45", 500.0, 3],
  ["C3", "ID3", "Customer", "ID_Card", "2015-1-3 9:23:33", "2015-1-4 8:32:30", 500.0, 3],
  ["C1", "C5", "Customer", "Customer", "2015-1-5 4:32:34", "2015-1-6 3:23:32", 500.0, 1]
]);
</code></pre>

<p>I parse through this data as follows:</p>

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

<p>The <strong>createNode()</strong> function helps to convert the data suitable to render a graph:</p>

<pre><code>          function createNodes(startnodes, endnodes, startnodetype, endnodetype, SendTime, PayTime, Total_Amt, Depth) {
  var node_set = [];
  var links = [];
  var nodetype = d3.set();
  startnodes.forEach(function(src, i) {
    var tgt = endnodes[i];
    if (!node_set.find(function(d) {
        return d.id == src
      })) {
      node_set.push({
        id: src,
        type: startnodetype[i]
      });
    }
    if (!node_set.find(function(d) {
        return d.id == tgt
      })) {
      node_set.push({
        id: tgt,
        type: endnodetype[i]
      });
    }

    links.push({
      source: src,
      target: tgt,
      sendtime: SendTime[i],
      paytime: PayTime[i],
      total_amt: Total_Amt[i],
      depth: Depth[i],
      value: 1
    });
  });

  startnodetype.forEach(function(src, i) {
    var tgt_type = endnodetype[i];
    nodetype.add(src);
    nodetype.add(tgt_type);
  });

  var d3GraphData = {
    nodes: node_set.map(function(d) {
      return {
        id: d.id,
        type: d.type,
        group: 1
      }
    }),
    links: links,
    nodetype: nodetype.values().map(function(d) {
      return {
        id: d.id,
        group: 1
      }
    })
  }
  return d3GraphData;

};
</code></pre>

<p>This is followed by the <strong>makeGraph()</strong> function that renders the graph based on the nodes and links formed in <strong>createNodes()</strong>.</p>

<p>There are number of filters which filter the graph data and everything works fine.</p>

<p>I am trying to add one last date time filter:</p>

<p>Below is the <strong>HTML</strong></p>

<pre><code>&lt;input type=datetime id = "Start_Date" value="" placeholder="Start_Date"/&gt;
&lt;input type=datetime id ="End_Date" value = "" placeholder="End_Date"/&gt;
&lt;button id = "date"&gt;
Interval
&lt;/button&gt;
</code></pre>

<p>There are following attributes that show up while hovering over the links</p>

<pre><code>d.PayTime , d.SendTime, d.Depth, d.Amount
</code></pre>

<p>I want the graph to be filtered in such a way that links follow:</p>

<pre><code> d.PayTime &gt;= Start_Date and &lt;= Pay_Date
 d.SendTime &gt;= Start_Date and &lt;= Pay_Date
</code></pre>

<p>The <strong>Start_Dates</strong> and <strong>End_Dates</strong> to be entered coukd be something like as follows:</p>

<pre><code>    Start_Date: 2015-1-3 15:00  
    End_Date:  2015-1-4 16:00
</code></pre>

<p>SO, the graph should get filtered so that only nodes with links that have </p>

<pre><code>  d.SendTime &gt;= 2015-1-3 15:00 and &lt;=2015-1-4 16:00
  d.PayTime &gt;= 2015-1-3 15:00 and &lt;=2015-1-4 16:00
</code></pre>

<p>This is what I have tried so far:</p>

<p>I am using below formatters. Also rest of the code is now updated and syntax errors are corrected.</p>

<pre><code>var parsedataDate = d3.timeParse("%Y-%m-%d %H:%M:%S");  //for d.sendtime and d.paytime
var parseDate = d3.timeFormat('%Y-%m-%d %H:%M:%S'); //for HTML inputs Start_Date and End_Date
console.log(parseDate(new Date('2015-1-7 13:45:54')));
console.log(parsedataDate('2015-1-7 13:45:54'));

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




    var newBtn = document.getElementById("date");
if (newBtn){
newBtn.addEventListener("click", function(){

    var nodes = [];
  var links = [];

 var e = document.getElementById("select_ID");
 var e1 = document.getElementById('Start_Date');
 var e2 = document.getElementById('End_Date');
 var strUser1 =  parseDate(Date.parse(e1.value)); 
 var strUser2 = parseDate(Date.parse(e2.value));


  d3.selectAll("line").filter(function(d, i) {
    d.sendtime = parsedataDate(d.sendtime);
    d.paytime = parsedataDate(d.paytime);
    if (d.sendtime &gt;= strUser1 &amp;&amp; d.sendtime &lt;= strUser2 &amp;&amp;d.paytime&gt;=strUser1 &amp;&amp;d.paytime&lt;=strUser2) {
      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);
});
}
</code></pre>

<p>Now there are no errors , but the filtering still does not work on inputting the <strong>Start_Date</strong> and <strong>End_Date</strong>. Tried with </p>

<pre><code>Start_Date:2015-1-1 3:00:00
End_Date: 2015-1-10 4:00:00
</code></pre>

<p>But it looks like there is something still wrong in the</p>

<pre><code>         d3.selectAll("line").filter(function(d, i) {....}
</code></pre>

<p>filter function.</p>

<p>Below is the <a href="https://jsfiddle.net/vishy1988/e6o13ghf/4/" rel="nofollow noreferrer">fiddle</a></p>