日期时间解析和过滤d3.js强制有向图

时间：2016-12-27 01:49:04

标签： javascript d3.js

我有一个带有许多过滤器的d3.js图表​​。我正在尝试根据日期和时间添加最后一个过滤器。

JSON数据 

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

我按如下方式解析这些数据：

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

createNode（）函数有助于转换适合渲染图形的数据：

          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;

};

接下来是 makeGraph（）函数，该函数根据 createNodes（）中形成的节点和链接呈现图形。

有许多过滤器可以过滤图表数据，一切正常。

我正在尝试添加最后一个日期时间过滤器：

以下是 HTML 

<input type=datetime id = "Start_Date" value="" placeholder="Start_Date"/>
<input type=datetime id ="End_Date" value = "" placeholder="End_Date"/>
<button id = "date">
Interval
</button>

将鼠标悬停在链接上时会显示以下属性

d.PayTime , d.SendTime, d.Depth, d.Amount

我想要按照链接的方式过滤图表：

 d.PayTime >= Start_Date and <= Pay_Date
 d.SendTime >= Start_Date and <= Pay_Date

Start_Dates 和 End_Dates 将被输入coukd，如下所示：

    Start_Date: 2015-1-3 15:00  
    End_Date:  2015-1-4 16:00

所以，图表应该被过滤，以便只有链接有

的节点 
  d.SendTime >= 2015-1-3 15:00 and <=2015-1-4 16:00
  d.PayTime >= 2015-1-3 15:00 and <=2015-1-4 16:00

这是我到目前为止所尝试的：

我正在使用以下格式化程序。此外，其余代码现已更新，语法错误也得到纠正。

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 < 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 >= strUser1 && d.sendtime <= strUser2 &&d.paytime>=strUser1 &&d.paytime<=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);
});
}

现在没有错误，但过滤仍无法输入 Start_Date 和 End_Date 。试过

Start_Date:2015-1-1 3:00:00
End_Date: 2015-1-10 4:00:00

但看起来

中还有一些问题 
         d3.selectAll("line").filter(function(d, i) {....}

过滤功能。

以下是fiddle

1 个答案:

答案 0 :(得分：1)

所以，关键是要选择正确的日期时间格式说明符。接近尾声只需要使用一个：

通过HTML输入解析如下：

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

解析 d.sendtime 和 d.paytime ，如下所示：

d.sendtime = parseDate(Date.parse(d.sendtime));
d.paytime = parseDate(Date.parse(d.paytime));
console.log(d.sendtime);
console.log(d.paytime);

整个部分的完整工作代码如下：

var parseDate = d3.timeFormat('%Y-%m-%d %H:%M:%S');
console.log(parseDate(new Date('2015-1-7 13:45:54')));


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

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


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

 console.log(strUser1);
 console.log(strUser2);

  d3.selectAll("line").filter(function(d, i) {
    d.sendtime = parseDate(Date.parse(d.sendtime));
    d.paytime = parseDate(Date.parse(d.paytime));
    console.log(d.sendtime);
    console.log(d.paytime);
    if (d.sendtime >= strUser1 && d.sendtime <= strUser2 &&d.paytime>=strUser1 &&d.paytime<=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);
});
}

以下是工作fiddle

相关问题
最新问题