Point Along a Circumference

by Nivaldo

HTML

<svg></svg>

JavaScript

var svg = d3.select("svg");


var cx = 338;
var cy = 289;

var r = 100;

svg.append("circle")
  .attr({
    id: "ring",
    cx: cx,
    cy: cy,
    r: r,
    fill: "none",
    stroke: "#1B8800",
    "stroke-width": 4,
    "stroke-opacity": 0.5
  });



var drag = d3.behavior.drag()
    .on("drag", function(d) {
      var mx = d3.mouse(this)[0];
      var my = d3.mouse(this)[1];
      
      //get angle
      var omega = Math.atan2(mx - cx, my - cy);
      //omega = 0.75;
      //console.log(omega);
      var px = cx + r * Math.sin(omega);
      var py = cy + r * Math.cos(omega);
      //console.log(px);
      //console.log(py);
      
      d3.select("#electron")
        .attr({
          cx: px,
          cy: py
        });
    })


svg.append("circle")
  .attr({
    id: "electron",
    cx: cx + r,
    cy: cy,
    r: 10,
    fill: "#268A92"
  })
  .call(drag)

//svg.call(drag)