Radial tree graph layout: fix beizer curves Radial tree graph layout: fix beizer curves wpf wpf

Radial tree graph layout: fix beizer curves


Looking at the graph from the link you provided each branch in the tree has it's own angle, which is used to declare the control points of the branch. This branchAngle is the same as the one of the vector going from the first node to the previous one (every branch can spawn several branches in turn). The angle of the first branch (first node = previous node = center) seems to be around -60°.

Setting the type of curve can be done by compensating this branch angle (0°, -90°, -180°,...) for all branches in the tree. Resulting in the controlAngle used for laying out the control points.

Generating the control points while taking into account the angles:

//gen per branch double branchAngle = 30 * Math.PI / 180; //e.g., calc vector angle here double cosB = Math.Cos(branchAngle); double sinB = Math.Sin(branchAngle);      //depending on the desired curve compensate -90°, -180°,... double controlAngle = branchAngle - (90 * Math.PI / 180);  double cosA = Math.Cos(controlAngle); double sinA = Math.Sin(controlAngle);//gen 2 control points //calculate dx dy after rotation with branchAngle double dxbase = target.X - source.X, dybase = target.Y - source.Y; double dx = dxbase*sinB - dybase*cosB double dy = dxbase*cosB + dybase*sinB //control points based on controlAngle var pts = new[] {    new Point(source.X + (2*dx/3)*cosA , source.Y + (2*dx/3)*sinA),    new Point(target.X - (dx/8)*cosA + (dy/8)*sinA, target.Y - (dx/8)*sinA - (dy/8)*cosA) };

Branch

Quick check branchAngle = 30° &compensation = -90° ->controlAngle = -60°