Skip to content

Instantly share code, notes, and snippets.

@nitaku

nitaku/README.md

Last active December 25, 2015 02:09
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save nitaku/6901037 to your computer and use it in GitHub Desktop.
Save nitaku/6901037 to your computer and use it in GitHub Desktop.
Download ZIP
Circles
Raw
README.md

A simple d3.js example. Click to add circles to the SVG.

Raw
index.coffee
window.main = () ->
### obtain a reference to the SVG ###
vis = d3.select('svg')
### when the user clicks the SVG ###
vis.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])
Raw
index.css
.node {
stroke-width: 4px;
stroke: gray;
fill: #dddddd;
}
Raw
index.html
<!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>
Raw
index.js
(function() {
window.main = function() {
/* obtain a reference to the SVG
*/
var vis;
vis = d3.select('svg');
/* when the user clicks the SVG
*/
return vis.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(this);
Raw
index.sass
.node
stroke-width: 4px
stroke: gray
fill: #DDD
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment