-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
133 lines (117 loc) · 3.61 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<!DOCTYPE html>
<meta charset="utf-8" />
<svg width="960" height="600"></svg>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script>
//initilize svg or grab svg
var svg = d3.select("svg");
var width = svg.attr("width");
var height = svg.attr("height");
var graphData = {
nodes: [{ name: "\Richard Fox" }, { name: "\Meryl Pastuch" }, { name: "\Rosalia Larroque" },
{ name: "\Kerstin Belveal" }, { name: "\Lindsay Henion" }, { name: "\Jose Ringwald" }, { name: "\Dylan Ballard" }, { name: "\Agusta Sharp" },
{ name: "\Glen Grant" }, { name: "\Tobi Gatlin" }],
links: [
{ source: "Richard Fox", target: "Meryl Pastuch" },
{ source: "Meryl Pastuch", target: "Rosalia Larroque" },
{ source: "Kerstin Belveal", target: "Rosalia Larroque" },
{ source: "Lindsay Henion", target: "Kerstin Belveal" },
{ source: "Jose Ringwald", target: "Lindsay Henion" },
{ source: "Dylan Ballard", target: "Jose Ringwald" },
{ source: "Agusta Sharp", target: "Dylan Ballard" },
{ source: "Glen Grant", target: "Agusta Sharp" },
{ source: "Tobi Gatlin", target: "Glen Grant" },
{ source: "Tobi Gatlin", target: "Richard Fox" }
]
};
var simulation = d3
.forceSimulation(graphData.nodes)
.force("charge", d3.forceManyBody().strength(-1000))
.force("center", d3.forceCenter(width / 2, height / 2))
.force("link", d3.forceLink(graphData.links).id(d => d.name))
.on("tick", ticked);
var links = svg
.append("g")
.selectAll("line")
.data(graphData.links)
.enter()
.append("line")
.attr("stroke-width", 4)
.style("stroke", "orange");
var drag = d3
.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended);
var textsAndNodes = svg
.append("g")
.selectAll("g")
.data(graphData.nodes)
.enter()
.append("g")
.call(drag)
/*if it fails when you run then comment the attr under this out
and youll have the basic layout again
*/
/* <g>
<g>
<text>
<circle>
</g>
<g></g>...
</g>
*/
graphData.links.forEach(function(link){
// initialize a new property on the node
if (!link.source["linkCount"]) link.source["linkCount"] = 0;
if (!link.target["linkCount"]) link.target["linkCount"] = 0;
// count it up
link.source["linkCount"]++;
link.target["linkCount"]++;
});
var circles = textsAndNodes
.append("circle")
.attr("r",function(d){
return d.linkCount ? (d.linkCount * 2) : 2; //<-- some function to determine radius
} )
.attr("fill", "red");
var texts = textsAndNodes.append("text").text(function(d) {
return d.name;
});
function ticked() {
//translate(x, y)
textsAndNodes.attr("transform", function(d) {
return "translate(" + d.x + ", " + d.y + ")";
});
links
.attr("x1", function(d) {
return d.source.x;
})
.attr("y1", function(d) {
return d.source.y;
})
.attr("x2", function(d) {
return d.target.x;
})
.attr("y2", function(d) {
return d.target.y;
});
console.log(simulation.alpha());
}
function dragstarted(d) {
//your alpha hit 0 it stops! make it run again
simulation.alphaTarget(0.3).restart();
d.fx = d3.event.x;
d.fy = d3.event.y;
}
function dragged(d) {
d.fx = d3.event.x;
d.fy = d3.event.y;
}
function dragended(d) {
// alpha min is 0, head there
simulation.alphaTarget(0);
d.fx = null;
d.fy = null;
}
</script>