0
我有一個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
SO，圖表應該得到過濾，以便只與有
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
從一個快速的樣子和我的理解，錯誤是由d3版本問題引起的。 d3.time.format是v3，似乎應該使用'd3.timeFormat' https://github.com/d3/d3-time-format/blob/master/README.md#timeFormat，https：// github .com/d3/d3/wiki /時間格式看看這個：https://jsfiddle.net/mkaran/c8Lkv25p/希望這會有所幫助，祝你好運！ – mkaran
你的小提琴也有一些語法問題（取消日期解析代碼後），我已經改變它的工作點沒有錯誤https://jsfiddle.net/e6o13ghf/，但你需要看看爲什麼'd3。 selectAll（「line」）。filter（function（d，i）{...}）'不起作用 - 我沒有時間看看它。祝你好運！ – mkaran
@mkaran看起來像var var parseDate = d3.timeFormat（「％d /％m /％Y」）;工作不正常。 console.log（parseDate（new Date（2014，4，1）））被記錄爲01/05/2014 –