-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
52 lines (49 loc) · 1.69 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
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>VisConnect Demo</title>
<script src="https://d3js.org/d3.v4.js"></script>
<script src="visconnect-bundle.js"></script>
</head>
<body>
<svg width="750" height="600"></svg>
<script>
var svg = d3.select('svg');
var color = d3.scaleOrdinal(d3.schemeCategory20);
var nodes = [
{group: 'A', x: 100, y: 100},
{group: 'B', x: 140, y: 200},
{group: 'C', x: 300, y: 150},
];
var drag = vc.drag().on('drag', function (d) {
d.x = d3.event.x;
d.y = d3.event.y;
const circle = d3.select(this);
circle.attr('cx', d.x);
circle.attr('cy', d.y);
d3.event.sourceEvent.preventDefault(); // Disable scrolling
});
var node = svg
.append('g')
.attr('class', 'nodes')
.selectAll('circle')
.data(nodes)
.enter()
.append('circle')
.attr('r', 30)
.attr('cx', (d) => d.x)
.attr('cy', (d) => d.y)
.attr('stroke-width', 3)
.attr('fill', function (d) {
return color(d.group);
})
.on('mouseenter', function () {
d3.select(this).attr('stroke', d3.event.collaboratorColor);
})
.on('mouseout', function () {
d3.select(this).attr('stroke', '');
})
.call(drag);
</script>
</body>
</html>