svg - d3 path radius calculation for quarter circle

Question

I'd like to draw a path between two points, which has a quarter circle arc where the arc radius = x2-x1.

For example:

x1=100
y1=100
x2=300
y2=300

I am using:

dx = x2-x1,
dy = y2-y1,
dr = Math.sqrt(dx*dx+dy*dy);    
return "M" + x1 + "," + y1 + "A" + dr + "," + dr + " 0 0,1 " + x2 + "," + y2;

I am struggling to calculate the correct dr for the quarter circle radius.

Thanks

Answer 1

In this case, the line connecting your two points would be the hypotenuse of your triangle. The other sides would have the same length, i.e. the radius. You can calculate it like this:

var dr = Math.sqrt((dx*dx+dy*dy)/2);

Full example: http://jsfiddle.net/E7JPy/1/