nitaku/README.md

## README.md

      
    Raw
  

              README.md
            
          
    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!

  
## index.coffee
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)


## index.css
.node {
  stroke-width: 4px;
  stroke: gray;
  fill: #dddddd;
}

.background {
  fill: transparent;
}

## 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>

## index.js
(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);

## index.sass
.node
    stroke-width: 4px
    stroke: gray
    fill: #DDD

.background
    fill: transparent


## thumbnail.png

      
    Raw
  

              thumbnail.png
	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)
	.node {
	stroke-width: 4px;
	stroke: gray;
	fill: #dddddd;
	}

	.background {
	fill: transparent;
	}
	<!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>
	(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);
	.node
	stroke-width: 4px
	stroke: gray
	fill: #DDD

	.background
	fill: transparent