score:7

Accepted answer

There isn't a path generator built in d3 to do that - you could grab the one I wrote for swoopy-drag though:

//convert 3 points to an Arc Path 
function calcCirclePath(points){
  var a = points[0].pos
  var b = points[2].pos
  var c = points[1].pos

  var A = dist(b, c)
  var B = dist(c, a)
  var C = dist(a, b)

  var angle = Math.acos((A*A + B*B - C*C)/(2*A*B))

  //calc radius of circle
  var K = .5*A*B*Math.sin(angle)
  var r = A*B*C/4/K
  r = Math.round(r*1000)/1000

  //large arc flag
  var laf = +(Math.PI/2 > angle)

  //sweep flag
  var saf = +((b[0] - a[0])*(c[1] - a[1]) - (b[1] - a[1])*(c[0] - a[0]) < 0) 

  return ['M', a, 'A', r, r, 0, laf, saf, b].join(' ')
}

function dist(a, b){
  return Math.sqrt(
    Math.pow(a[0] - b[0], 2) +
    Math.pow(a[1] - b[1], 2))
}

Related Query