Skip to content

Commit 04b459d

Browse files
gramcrackergramcracker
committed
Creation of searchNodes function allowing view outgoing context menu option to work for all nodes.
1 parent 7950029 commit 04b459d

File tree

5 files changed

+299
-264
lines changed

5 files changed

+299
-264
lines changed

‎contextmenu.js

Lines changed: 41 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,49 @@
1-
function contextmenu(d){
2-
//d3.select(".custom_menu").remove();
3-
d3.event.preventDefault();
4-
menu = d3.select(".custom_menu")
5-
.style("left", d3.event.pageX + "px")
6-
.style("top", d3.event.pageY + "px")
7-
.style("position","absolute")
8-
.style("display", 'block');
1+
function contextmenu(d) {
2+
//d3.select(".custom_menu").remove();
3+
d3.event.preventDefault();
4+
menu = d3
5+
.select(".custom_menu")
6+
.style("left", d3.event.pageX + "px")
7+
.style("top", d3.event.pageY + "px")
8+
.style("position", "absolute")
9+
.style("display", "block");
910

10-
menu.selectAll('li')
11-
.on("click", function(e, i){
12-
contextOptions(d, i);
11+
menu.selectAll("li").on("click", function(e, i) {
12+
contextOptions(d, i);
13+
});
14+
}
15+
16+
d3.select("body").on("click", function() {
17+
d3.select(".custom_menu").style("display", "none");
18+
});
1319

14-
});
20+
function contextOptions(d, i) {
21+
switch (i) {
22+
case 0:
23+
focus.children.forEach(function(n) {
24+
if (n.data.name == d.name && n.children) {
25+
transition(n);
26+
return;
27+
}
28+
29+
});
1530

31+
let e = searchNodes(root, d.name);
32+
break;
33+
case 1:
34+
break;
35+
}
1636
}
1737

18-
d3.select('body').on('click', function() {
19-
d3.select('.custom_menu').style('display', 'none');
20-
});
2138

22-
function contextOptions(d, i){
23-
console.log(i);
24-
switch(i){
25-
case(0):
26-
console.log(focus);
27-
focus.children.forEach(function(n){
28-
if(n.data.name == d.name){
29-
transition(n);
30-
}else{
31-
console.log(d.name + " not in focus");
32-
}
33-
});
34-
// if (focus.children.some(n => )) {
35-
// transition(n);
36-
// }else{
37-
// console.log(d.name + " not in focus");
38-
// }
39-
break;
40-
case(1):
41-
break;
39+
function searchNodes(d, s) {
40+
if (d.data.name == s) {
41+
transition(d.parent);
42+
return;
43+
}
44+
if (d.children) {
45+
for (let i in d.children) {
46+
searchNodes(d.children[i], s);
47+
}
4248
}
4349
}

‎sankey.js

Lines changed: 121 additions & 91 deletions
Original file line numberDiff line numberDiff line change
@@ -3,122 +3,152 @@ var units = "Widgets";
33
var defaultNodeHeight = 15;
44

55
// set the dimensions and margins of the graph
6-
var margin = {top: 0, right: 0, bottom: 0, left: 0},
7-
height = 300;
6+
var margin = { top: 0, right: 0, bottom: 0, left: 0 },
7+
height = 300;
88

99
// format variables
10-
var formatNumber = d3.format(",.0f"), // zero decimal places
11-
format = function(d) { return formatNumber(d) + " " + units; };
10+
var formatNumber = d3.format(",.0f"), // zero decimal places
11+
format = function(d) {
12+
return formatNumber(d) + " " + units;
13+
};
1214

1315
// append the svg object to the body of the page
14-
var svg2 = d3.select("#sankeyChart").append("svg")
15-
.attr("id", "sankey")
16-
.attr("width", width)
17-
.attr("height", height + 20);
16+
var svg2 = d3
17+
.select("#sankeyChart")
18+
.append("svg")
19+
.attr("id", "sankey")
20+
.attr("width", width)
21+
.attr("height", height + 20);
1822

1923
// Set the sankey diagram properties
20-
var sankey = d3.sankey()
21-
.nodeWidth(5)
22-
.nodePadding(40)
23-
.size([width, height]);
24+
var sankey = d3
25+
.sankey()
26+
.nodeWidth(5)
27+
.nodePadding(40)
28+
.size([width, height]);
2429

2530
var path = sankey.link();
2631

2732
// load the data
28-
function loadSankey(graph){
29-
33+
function loadSankey(graph) {
3034
svg2.selectAll("g").remove();
3135

3236
//uncomment to add filters
3337
//const defs = svg.append('defs');
3438

3539
sankey
36-
.nodes(graph.nodes)
37-
.links(graph.links)
38-
.layout(32);
39-
40-
// add in the links
41-
var link = svg2.append("g").selectAll(".link")
42-
.data(graph.links)
43-
.enter().append("path")
44-
.attr("class", "link")
45-
.attr("d", path)
46-
.style("stroke", "grey")
47-
.style("stroke-width", function(d) { return Math.max(1, d.dy); })
48-
.sort(function(a, b) { return d3.descending(a.dy, b.dy);});
49-
50-
// add the link titles
51-
link.append("title")
52-
.text(function(d) {
53-
return d.source.name + " → " +
54-
d.target.name });
55-
56-
// add in the nodes
57-
var node = svg2.append("g").selectAll(".node")
58-
.data(graph.nodes)
59-
.enter().append("g")
60-
.attr("class", "node")
61-
.attr("transform", function(d) {
62-
if(d.value == 0) {
63-
d.x = 0.0;
64-
d.dy = defaultNodeHeight;
65-
if(graph.links.length == 0){
66-
d.dy = (height / graph.nodes.length);
67-
d.y = d.y * (height / graph.nodes.length);
68-
69-
}
40+
.nodes(graph.nodes)
41+
.links(graph.links)
42+
.layout(32);
43+
44+
// add in the links
45+
var link = svg2
46+
.append("g")
47+
.selectAll(".link")
48+
.data(graph.links)
49+
.enter()
50+
.append("path")
51+
.attr("class", "link")
52+
.attr("d", path)
53+
.style("stroke", "grey")
54+
.style("stroke-width", function(d) {
55+
return Math.max(1, d.dy);
56+
})
57+
.sort(function(a, b) {
58+
return d3.descending(a.dy, b.dy);
59+
});
60+
61+
// add the link titles
62+
link.append("title").text(function(d) {
63+
return d.source.name + " → " + d.target.name;
64+
});
65+
66+
// add in the nodes
67+
var node = svg2
68+
.append("g")
69+
.selectAll(".node")
70+
.data(graph.nodes)
71+
.enter()
72+
.append("g")
73+
.attr("class", "node")
74+
.attr("transform", function(d) {
75+
if (d.value == 0) {
76+
d.x = 0.0;
77+
d.dy = defaultNodeHeight;
78+
if (graph.links.length == 0) {
79+
d.dy = height / graph.nodes.length;
80+
d.y = d.y * (height / graph.nodes.length);
7081
}
71-
return "translate(" + d.x + "," + d.y + ")"; })
72-
.call(d3.drag()
82+
}
83+
return "translate(" + d.x + "," + d.y + ")";
84+
})
85+
.call(
86+
d3
87+
.drag()
7388
.subject(function(d) {
7489
return d;
7590
})
7691
.on("start", function() {
7792
this.parentNode.appendChild(this);
7893
})
79-
.on("drag", dragmove));
80-
81-
// add the rectangles for the nodes
82-
node.append("rect")
83-
.attr("height", function(d) {
84-
return Math.max(1, d.dy); })
85-
.attr("width", sankey.nodeWidth())
86-
.style("fill", function(d) {
87-
colorwheel++;
88-
return d.color = color(colorwheel); })
89-
.style("stroke-width", 0)
94+
.on("drag", dragmove)
95+
);
96+
97+
// add the rectangles for the nodes
98+
node
99+
.append("rect")
100+
.attr("height", function(d) {
101+
return Math.max(1, d.dy);
102+
})
103+
.attr("width", sankey.nodeWidth())
104+
.style("fill", function(d) {
105+
colorwheel++;
106+
return (d.color = color(colorwheel));
107+
})
108+
.style("stroke-width", 0)
90109
.append("title")
91-
.text(function(d) {
92-
return d.name + "\n" + format(d.value); });
93-
94-
// add in the title for the nodes
95-
nodeText = node.append("text")
96-
.attr("x", -6)
97-
.attr("y", function(d) { return d.dy / 2; })
98-
.attr("dy", ".35em")
99-
.attr("text-anchor", "end")
100-
.attr("transform", null)
101-
.text(function(d) { return d.name; })
102-
.on("contextmenu", function(d) {
103-
contextmenu(d);
104-
})
105-
.filter(function(d) { return d.x < width / 2; })
106-
.attr("x", 6 + sankey.nodeWidth())
107-
.attr("text-anchor", "start")
108-
.style("fill", function(d) {
109-
return d.value > 0 ? "black": "white";});
110-
111-
112-
// the function for moving the nodes
110+
.text(function(d) {
111+
return d.name + "\n" + format(d.value);
112+
});
113+
114+
// add in the title for the nodes
115+
nodeText = node
116+
.append("text")
117+
.attr("x", -6)
118+
.attr("y", function(d) {
119+
return d.dy / 2;
120+
})
121+
.attr("dy", ".35em")
122+
.attr("text-anchor", "end")
123+
.attr("transform", null)
124+
.text(function(d) {
125+
return d.name;
126+
})
127+
.on("contextmenu", function(d) {
128+
contextmenu(d);
129+
})
130+
.filter(function(d) {
131+
return d.x < width / 2;
132+
})
133+
.attr("x", 6 + sankey.nodeWidth())
134+
.attr("text-anchor", "start")
135+
.style("fill", function(d) {
136+
return d.value > 0 ? "black" : "white";
137+
});
138+
139+
// the function for moving the nodes
113140
function dragmove(d) {
114-
d3.select(this)
115-
.attr("transform",
116-
"translate("
117-
+ d.x + ","
118-
+ (d.y = Math.max(
119-
0, Math.min(height - d.dy, d3.event.y))
120-
) + ")");
141+
d3
142+
.select(this)
143+
.attr(
144+
"transform",
145+
"translate(" +
146+
d.x +
147+
"," +
148+
(d.y = Math.max(0, Math.min(height - d.dy, d3.event.y))) +
149+
")"
150+
);
121151
sankey.relayout();
122152
link.attr("d", path);
123153
}
124-
}
154+
}

0 commit comments

Comments
 (0)