Trig helper

HTML

<script src="http://mbostock.github.com/d3/d3.js"></script>
<svg></svg>

CSS

rect{fill:skyblue}
svg{border:1px solid silver}

JavaScript

d3.helper = {};
d3.helper.angleGeom = function module(_cx, _cy, _r, _r2, _a){
    var x = _cx + Math.cos(_a) * _r,
    y = _cy + Math.sin(-_a) * _r; 
    
    var exports = {};    
    exports.line = {x1: _cx, y1: _cy, x2: x, y2: y};
    exports.circle = {r: _r, cx: _cx, cy: _cy};
    exports.point = {r: _r2, cx: x, cy: y};
    
    return exports;
}

var radius = 200;
var radius2 = 5;
//center of our circle
var cx = 220;
var cy = 220;
var angle = Math.PI * 0.75;
    
var angleGeom = d3.helper.angleGeom(cx, cy, radius, radius2, angle);
console.log(angleGeom.line, angleGeom.circle);

var svg = d3.select('svg');
    
//our outter circle
svg.append("circle")
  .attr(angleGeom.circle)
  .style({
    stroke: "#000000",
    fill: "none"
  })
  
  
//our point
var anglex = cx + Math.cos(angle) * radius;
var angley = cy + Math.sin(-angle) * radius;
svg.append("circle")
  .attr(angleGeom.point)
  .style({
    stroke: "#000000",
    fill: "none"
  });


svg.append("line")
  .attr(angleGeom.line)
  .style({
    stroke: "#000000",
    "stroke-width": "5px"
  })