0
私は強制的な有向グラフを持っています。以下d3.jsグラフの検索機能
次のように私はこの動的JSONデータを解析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],..])
の形式である：
以下 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グラフで検索機能を実装しようとしています。ユーザーはその後
とバックに1 0に設定し、不透明度を持つことになり、検索フィールドにノード「ID」と選択したノードから離れて他のすべてを入力することができます。
すべてのノードが
以下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が存在し、機能が動作せず何も起こらない。以下は
ありがとうございます。私は本当に近いですが、このクラスのものは新しいものでした。この検索機能を他のフィルタと連携させることは可能ですか？ –
ねえ、あなたは本当に近くにいた！うれしい私は助けた。フィルターについては、このような意味ですか？https://jsfiddle.net/mkaran/dw6wb3ow/？ – mkaran
これは素晴らしいです..本当に感謝します。検索機能は、不透明度を制御するチェックボックス以外のすべてのフィルタで正常に動作します。例えば、 "Customer"と "ID_Card"を選択すると、それらは不透明になり、他のものはすべて不透明度が0になります。次に、「Customer」または「ID_Card」のインスタンスを検索してみると、それはちょうど崩壊し、意図したとおりに動作しません。 –