-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathforce1.html
189 lines (164 loc) · 6.19 KB
/
force1.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
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://d3js.org/d3.v7.min.js"></script>
<script>
// when document is ready...
document.addEventListener("DOMContentLoaded", function(event) {
// fetch local d3_obj.json file
let d3_obj;
d3.json("d3_obj.json").then(function(data) {
console.log(data);
d3_obj = data;
// create a new ForceGraph instance
const chart = ForceGraph(data, {
nodeId: d => d.id,
nodeTitle: d => `${d.id}`,
linkStrokeWidth: l => Math.sqrt(l.value),
width: 940,
height: 700,
// invalidation // a promise to stop the simulation when the cell is re-run
})
// append the svg to the body
document.body.append(chart);
console.log("cake's ready!");
});
//define DOM
const DOM = {
canvas: (width, height) => {
const canvas = document.createElement("canvas");
canvas.width = width;
canvas.height = height;
return canvas;
},
context2d: (width, height, pixelRatio = window.devicePixelRatio) => {
const canvas = DOM.canvas(width * pixelRatio, height * pixelRatio);
canvas.style.width = `${width}px`;
canvas.style.height = `${height}px`;
const context = canvas.getContext("2d");
context.scale(pixelRatio, pixelRatio);
return context;
}
};
// Copyright 2021 Observable, Inc.
// Released under the ISC license.
// https://observablehq.com/@d3/force-directed-graph-canvas
function ForceGraph({
nodes, // an iterable of node objects (typically [{id}, …])
links // an iterable of link objects (typically [{source, target}, …])
}, {
nodeId = d => d.id, // given d in nodes, returns a unique identifier (string)
nodeGroup, // given d in nodes, returns an (ordinal) value for color
nodeGroups, // an array of ordinal values representing the node groups
nodeFill = "currentColor", // node stroke fill (if not using a group color encoding)
nodeStroke = "#fff", // node stroke color
nodeStrokeWidth = 0.5, // node stroke width, in pixels
nodeStrokeOpacity = 1, // node stroke opacity
nodeRadius = 1, // node radius, in pixels
nodeStrength,
linkSource = ({source}) => source, // given d in links, returns a node identifier string
linkTarget = ({target}) => target, // given d in links, returns a node identifier string
linkStroke = "#999", // link stroke color
linkStrokeOpacity = 0.2, // link stroke opacity
linkStrokeWidth = 0.5, // given d in links, returns a stroke width in pixels
linkStrokeLinecap = "round", // link stroke linecap
linkStrength,
colors = d3.schemeTableau10, // an array of color strings, for the node groups
width = 640, // outer width, in pixels
height = 400, // outer height, in pixels
invalidation // when this promise resolves, stop the simulation,
} = {}) {
// Compute values.
const N = d3.map(nodes, nodeId).map(intern);
const LS = d3.map(links, linkSource).map(intern);
const LT = d3.map(links, linkTarget).map(intern);
const G = nodeGroup == null ? null : d3.map(nodes, nodeGroup).map(intern);
const W = typeof linkStrokeWidth !== "function" ? null : d3.map(links, linkStrokeWidth);
const L = typeof linkStroke !== "function" ? null : d3.map(links, linkStroke);
// Replace the input nodes and links with mutable objects for the simulation.
nodes = d3.map(nodes, (_, i) => ({id: N[i]}));
links = d3.map(links, (_, i) => ({source: LS[i], target: LT[i]}));
// Compute default domains.
if (G && nodeGroups === undefined) nodeGroups = d3.sort(G);
// Construct the scales.
const color = nodeGroup == null ? null : d3.scaleOrdinal(nodeGroups, colors);
// Construct the forces.
const forceNode = d3.forceManyBody();
const forceLink = d3.forceLink(links).id(({index: i}) => N[i]);
if (nodeStrength !== undefined) forceNode.strength(nodeStrength);
if (linkStrength !== undefined) forceLink.strength(linkStrength);
const simulation = d3.forceSimulation(nodes)
.force("link", forceLink)
.force("charge", forceNode)
.force("center", d3.forceCenter(width/2, height/2))
.on("tick", ticked);
const context = DOM.context2d(width, height);
function ticked() {
context.clearRect(0, 0, width, height);
context.save();
context.globalAlpha = linkStrokeOpacity;
for (const [i, link] of links.entries()) {
context.beginPath();
drawLink(link);
context.strokeStyle = L ? L[i]: linkStroke;
context.lineWidth = W ? W[i]: linkStrokeWidth;
context.stroke();
}
context.restore();
context.save();
context.strokeStyle = nodeStroke;
context.globalAlpha = nodeStrokeOpacity;
for (const [i, node] of nodes.entries()) {
context.beginPath();
drawNode(node)
context.fillStyle = G ? color(G[i]): nodeFill;
context.strokeStyle = nodeStroke;
context.fill();
context.stroke();
}
context.restore();
}
function drawLink(d) {
context.moveTo(d.source.x, d.source.y);
context.lineTo(d.target.x, d.target.y);
}
function drawNode(d) {
context.moveTo(d.x + nodeRadius, d.y);
context.arc(d.x, d.y, nodeRadius, 0, 2 * Math.PI);
}
if (invalidation != null) invalidation.then(() => simulation.stop());
function intern(value) {
return value !== null && typeof value === "object" ? value.valueOf() : value;
}
function drag(simulation) {
function dragstarted(event) {
if (!event.active) simulation.alphaTarget(0.3).restart();
event.subject.fx = event.subject.x;
event.subject.fy = event.subject.y;
}
function dragged(event) {
event.subject.fx = event.x;
event.subject.fy = event.y;
}
function dragended(event) {
if (!event.active) simulation.alphaTarget(0);
event.subject.fx = null;
event.subject.fy = null;
}
function dragsubject(event) {
return simulation.find(event.sourceEvent.offsetX, event.sourceEvent.offsetY);
}
return d3.drag()
.subject(dragsubject)
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended);
}
return Object.assign(d3.select(context.canvas).call(drag(simulation)).node(), {scales: {color}});
}
});
</script>
</head>
<body>
</body>
</html>