【发布时间】：2017-01-04 15:43:13
【问题描述】：
我有一个强制有向图。
以下是JSON数据的格式
var IDData = JSON.stringify([
["1000000000039214051", "1000000000336563307", "Customer", "Customer", "2016-06-21 01:32:42", "2016-06-21 02:39:45", 155.4492950439453, 4],
["1000000000039214051", "10000000682705", "Customer", "Agent", "2016-08-16 23:12:24", "2016-08-17 05:08:22", 171.84144592285156, 3],
["04144221227", "1000000000060220197", "Phone", "Customer", "2016-01-04 03:41:13", "2016-01-05 01:54:03", 264.75457763671875, 4],
["10000000490503", "1000000000060220197", "Agent", "Customer", "2016-10-21 03:39:50", "2016-10-21 06:59:41", 26.845823287963867, 4],
["1000000000218556629", "600169462257", "Customer", "Phone", "2016-10-05 21:51:01", "2016-10-06 02:41:32", 76.26348876953125, 4],
["10000000486511", "2000000000212907929", "Agent", "Customer", "2016-11-13 23:33:38", "2016-11-14 01:30:13", 114.56245422363281, 3],
["CHB445789", "1000000000313013892", "ID_Card", "Customer", "2016-01-04 01:50:38", "2016-01-04 08:12:44", 457.4786071777344, 4],
["10000000499929", "2000000000144964466", "Agent", "Customer", "2016-09-01 05:01:45", "2016-09-04 03:44:10", 121.28453826904297, 1],
["2000000000180876855", "2000000000249424289", "Customer", "Customer", "2016-05-23 05:03:58", "2016-05-23 08:35:11", 218.06622314453125, 1],..])
我通过这个动态 JSON 数据解析如下：
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);
下面是 createNodes 函数，它为 makeGraph 函数生成节点和链接：
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;
};
现在，我正在尝试在我的 d3.js 图表中实现搜索功能。用户可以在搜索字段中输入一个节点“Id”，除了所选节点之外的所有其他内容都将不透明度设置为 0
duration(5000)
然后回到 1。
所有节点都有属性
d.id
下面是 HTML 和 事件监听器
<input type = "text" id="node"/>
<button id ="search">
Search_Node
</button>
var myBtn = document.getElementById("search");
myBtn.addEventListener("click", function () {
//find the node
var selectedVal = document.getElementById("node").value;
var node = svg.selectAll(".node");
if (selectedVal == "none") {
node.style("stroke", "white").style("stroke-width", "1");
} else {
var selected = node.filter(function (d) {
return d.id != selectedVal;
});
selected.style("opacity", "0");
var link = svg.selectAll(".link")
link.style("opacity", "0");
d3.selectAll(".node, .link").transition()
.duration(5000)
.style("opacity", 1);
}
});
我没有看到任何错误，但是当我尝试输入存在的节点 ID 时，该功能不起作用并且没有任何反应。
下面是fiddle
【问题讨论】：
标签： javascript d3.js