An upgrade of this example: circles can now be dragged around, thanks to D3's drag behavior.
Click on the background to create a new circle, then drag it!
Last active
December 25, 2015 05:18
-
-
Save nitaku/6923131 to your computer and use it in GitHub Desktop.
Draggable circles
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
| window.main = () -> | |
| ### obtain a reference to the SVG ### | |
| vis = d3.select('svg') | |
| ### --- Circle dragging --- ### | |
| ### define a drag behavior ### | |
| drag = d3.behavior.drag() | |
| .on 'drag', () -> | |
| ### move the circle ### | |
| d3.select(this) | |
| .attr('cx', d3.event.x) | |
| .attr('cy', d3.event.y) | |
| ### --- Circle creation --- ### | |
| ### create a rectangle to serve as background ### | |
| background = vis.append('rect') | |
| .attr('class', 'background') | |
| .attr('width', vis.attr('width')) | |
| .attr('height', vis.attr('height')) | |
| ### when the user clicks the background ### | |
| background.on 'click', () -> | |
| ### retrieve mouse coordinates ### | |
| p = d3.mouse(this) | |
| ### create a new circle at point p ### | |
| vis.append('circle') | |
| .attr('class', 'node') | |
| .attr('r', 20) | |
| .attr('cx', p[0]) | |
| .attr('cy', p[1]) | |
| .call(drag) | |
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
| .node { | |
| stroke-width: 4px; | |
| stroke: gray; | |
| fill: #dddddd; | |
| } | |
| .background { | |
| fill: transparent; | |
| } |
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> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Graph editor</title> | |
| <link type="text/css" href="index.css" rel="stylesheet"/> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| <script src="index.js"></script> | |
| </head> | |
| <body onload="main()"> | |
| <svg width="960" height="500"> | |
| </svg> | |
| </body> | |
| </html> |
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
| (function() { | |
| window.main = function() { | |
| /* obtain a reference to the SVG | |
| */ | |
| var background, drag, vis; | |
| vis = d3.select('svg'); | |
| /* --- Circle dragging --- | |
| */ | |
| /* define a drag behavior | |
| */ | |
| drag = d3.behavior.drag().on('drag', function() { | |
| /* move the circle | |
| */ return d3.select(this).attr('cx', d3.event.x).attr('cy', d3.event.y); | |
| }); | |
| /* --- Circle creation --- | |
| */ | |
| /* create a rectangle to serve as background | |
| */ | |
| background = vis.append('rect').attr('class', 'background').attr('width', vis.attr('width')).attr('height', vis.attr('height')); | |
| /* when the user clicks the background | |
| */ | |
| return background.on('click', function() { | |
| /* retrieve mouse coordinates | |
| */ | |
| var p; | |
| p = d3.mouse(this); | |
| /* create a new circle at point p | |
| */ | |
| return vis.append('circle').attr('class', 'node').attr('r', 20).attr('cx', p[0]).attr('cy', p[1]).call(drag); | |
| }); | |
| }; | |
| }).call(this); |
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
| .node | |
| stroke-width: 4px | |
| stroke: gray | |
| fill: #DDD | |
| .background | |
| fill: transparent | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment