Last active
July 22, 2020 18:54
-
-
Save michaschwab/20b08f298684c4b0e95f5a4a6c35d0e1 to your computer and use it in GitHub Desktop.
VisConnect Simple Drag Demo
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en-US"> | |
<head> | |
<title>VisConnect Demo</title> | |
<script src="https://unpkg.com/peerjs@1.0.4/dist/peerjs.min.js"></script> | |
<script src="https://d3js.org/d3.v4.min.js"></script> | |
<script src="https://unpkg.com/visconnect@1.0.0/visconnect-bundle.js"></script> | |
</head> | |
<body> | |
<svg width="960" 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> |
Author
michaschwab
commented
Jul 21, 2020
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment