我有一个强制有向图。
以下是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
最佳答案
看看这个:
https://jsfiddle.net/mkaran/7fxvvz8d/
问题是您选择的是节点组而不是圆圈
var node = svg.append("g")// you were selecting this
.attr("class", "nodes")
.selectAll("circle")
.data(d3GraphData.nodes)
.enter()
.append("circle")// instead of this
.attr("class", "node") // so I added a class to make it easier
.attr("r", 5)
.attr("fill", function(d) {
return color(d.type);
})
.on('mouseover', function(d) {
tooltip.transition()
.duration(600)
.style("opacity", .8);
tooltip.html(d.id + "<p/>type:" + d.type)
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY + 10) + "px");
})
.on("mouseout", function() {
tooltip.transition()
.duration(200)
.style("opacity", 0);
})
.on("mousemove", function() {
tooltip.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY + 10) + "px");
})
.call(d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended));
链接也是如此
var link = svg.append("g")// you were selecting the group
.attr("class", "links")// by this class
.selectAll("line")
.data(d3GraphData.links)
.enter().append("line")
.attr("stroke-width", 5)
.attr("class", "link") // added a class on the lines
.on('mouseover', function(d) {
var thisSource = d.source.id,
thisTarget = d.target.id;
var filteredLinks = d3GraphData.links.filter(function(e) {
return (e.source.id === thisSource && e.target.id === thisTarget) || (e.source.id === thisTarget && e.target.id === thisSource);
});
在按钮事件中:
myBtn.addEventListener("click", function () {
//find the node
var selectedVal = document.getElementById('node').value;
var node = svg.selectAll(".node"); // you selected the group
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")// same here
link.style("opacity", "0");
d3.selectAll(".node, .link").transition() // and here
.duration(5000)
.style("opacity", 1);
}
});
我将其修改为:
myBtn.addEventListener("click", function () {
//find the node
var selectedVal = document.getElementById('node').value;
var node = svg.selectAll(".node"); // select the circles
if (selectedVal == "none") {
node.style("stroke", "white").style("stroke-width", "1");
} else {
var selected = node.filter(function (d) {
return d.id == selectedVal;
});
node.style("opacity", 0); // hide all nodes
selected.style("opacity", 1)// but this one
.attr("fill", "red");// just for the effect
var link = svg.selectAll(".link")
.style("opacity", 0);// hide all links
// and then show them all again after some time
node.transition()
.duration(5000)
.style("opacity", 1);
link.transition()
.duration(5000)
.style("opacity", 1);
}
});
希望这有帮助!祝你好运!
关于javascript - d3.js 图中的搜索功能，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41456008/