Skip to content

Instantly share code, notes, and snippets.

@michaschwab

michaschwab/index.html

Last active July 22, 2020 18:54
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save michaschwab/20b08f298684c4b0e95f5a4a6c35d0e1 to your computer and use it in GitHub Desktop.
Save michaschwab/20b08f298684c4b0e95f5a4a6c35d0e1 to your computer and use it in GitHub Desktop.
Download ZIP
VisConnect Simple Drag Demo
Raw
index.html
<!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>
@michaschwab
Copy link
Author

drag

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment