How to add link label curved linlks. about force-graph HOT 14 OPEN

Hey Guys, a little bit of patience and math then I solved the problem this way:
force-graph uses a third-party lib to render these curved links called bezier-js ,so i made a function that calculates a point along the curve and if you pass 0.5 as parameter you will reach the middle point of the curve. Thanks @vasturiano for the help.

function getQuadraticXY(t, sx, sy, cp1x, cp1y, ex, ey) {
  return {
    x: (1 - t) * (1 - t) * sx + 2 * (1 - t) * t * cp1x + t * t * ex,
    y: (1 - t) * (1 - t) * sy + 2 * (1 - t) * t * cp1y + t * t * ey,
  };
}

if (+link.curvature > 0) {
          textPos = getQuadraticXY(
            0.5,
            start.x,
            start.y,
            link.__controlPoints[0],
            link.__controlPoints[1],
            end.x,
            end.y
          );
        }

If anyone wants to see here is my code

from force-graph.

Ok, i was able to get this to work correctly, by updating the formula above to use 4 control pints instead of 2 which is the case for self referencing links :
i got the formula from here (which is from wikipedia) : https://stackoverflow.com/a/54216695
this is the full function usage :

CanvasRenderingContext2D.prototype.getQuadraticXY = function (t, sx, sy, cp1x, cp1y, ex, ey) {
    return {
      x: (1 - t) * (1 - t) * sx + 2 * (1 - t) * t * cp1x + t * t * ex,
      y: (1 - t) * (1 - t) * sy + 2 * (1 - t) * t * cp1y + t * t * ey,
    };
  };
 CanvasRenderingContext2D.prototype.getQuadraticXYFourWays = function (
    t,
    sx,
    sy,
    cp1x,
    cp1y,
    cp2x,
    cp2y,
    ex,
    ey,
  ) {
    return {
      x:
        (1 - t) * (1 - t) * (1 - t) * sx +
        3 * (1 - t) * (1 - t) * t * cp1x +
        3 * (1 - t) * t * t * cp2x +
        t * t * t * ex,
      y:
        (1 - t) * (1 - t) * (1 - t) * sy +
        3 * (1 - t) * (1 - t) * t * cp1y +
        3 * (1 - t) * t * t * cp2y +
        t * t * t * ey,
    };
  };
  
  (.....)
  
  if (+link.curvature > 0) {
      if (start.id === end.id) {
        textPos = this.getQuadraticXYFourWays(
          0.5,
          start.x,
          start.y,
          link.__controlPoints[0],
          link.__controlPoints[1],
          link.__controlPoints[2],
          link.__controlPoints[3],
          end.x,
          end.y,
        );
      } else {
        textPos = this.getQuadraticXY(
          0.5,
          start.x,
          start.y,
          link.__controlPoints[0],
          link.__controlPoints[1],
          end.x,
          end.y,
        );
      }
    }
  
  

from force-graph.

Awesome @moda20, you should be very proud dude

from force-graph.

@vasturiano is there any solution.

from force-graph.

@gdswapnil11 you should calculate where you wish to position your link labels in this part:

      const textPos = Object.assign({},...['x', 'y'].map(c => ({
        [c]: start[c] + (end[c] - start[c]) / 2 // calc middle point
      })));

This uses the halfway point in between the two nodes. If you wish it to be positioned elsewhere, simply change that calculation.

from force-graph.

hey @vasturiano , i tried this, but can not find right solution ,can u provide me sample code for this.
i use curvature for curve links.

from force-graph.

@gdswapnil11 which part are you not able to get to work properly?

from force-graph.

@vasturiano my output look like this, label on curved line are over lapping on one position so how do i manage as per link curvature.

from force-graph.

@gdswapnil11 have you tried adjusting the textPos method as mentioned above?

from force-graph.

hey, @vasturiano yes i have tried adjusting the textPos, here is my sample code

ctx.fillText(label,0, curvature*50);

Still my output look like, i have another question that can we use ctx.bezierCurveTo() for curve text.

from force-graph.

@gdswapnil11 do you by chance have a repo of your implementation? I have a similar use case.

from force-graph.

@Bomfim thank you

from force-graph.

Hi :)

Did anyone get anything better than this?

I also tried with this library https://github.com/Viglino/Canvas-TextPath but I find difficult to find the coordinates of the path

thanks

from force-graph.

I tried this function and it worked correctly for curved links between 2 nodes, but not correctly for self referencing links (from A to A) @vasturiano can you help with this ? it's probably an issue that the start and end coordinates are the same

from force-graph.