block by enjalot 2d69e7fa30b8e7674590

electron

Full Screen

awesome electron

drag the blue dot

forked from enjalot‘s block: electron

index.html


<!DOCTYPE html>
<meta charset="utf-8">
<head>
	<style>
	svg {
		width: 960px;
		height: 500px;
	}
	</style>
	<script src="//d3js.org/d3.v3.min.js"></script>
</head>
<body>
	<svg></svg>
	<script>
	var svg = d3.select("svg");

	var cx = 960/2;
	var cy = 500/2;
	var outr = 200;

	var outer = svg.append("circle")
    .attr({
      cx: cx,
      cy: cy,
      r: outr,
      fill: "none",
      stroke: "#1B8600",
      "stroke-width": 4
    });

	var electron = svg.append("circle")
    .attr({
      cx: cx + outr,
      cy: cy,
      r: 15,
      fill: "#067BA8"
    });

	var drag = d3.behavior.drag()
    .on("drag", function() {
      var mx = d3.mouse(this)[0];
      var my = d3.mouse(this)[1];
      
      var omega = Math.atan2(mx - cx, my - cy);
      var nx = outr * Math.sin(omega);
      var ny = outr * Math.cos(omega);
      
      electron.attr({
        cx: cx + nx,
        cy: cy + ny
      })
      
    })

	electron.call(drag);

	</script>
</body>