0

I have some nodes and links and am drawing a graph, I successfully draw the following graph, enter image description here

I want to change the connections from G to D and from E to C like the second screenshot with the red lines.

enter image description here

some code

// the diagonal link generator
diagonal = d3
    .linkHorizontal()
    .x(d => d.x)
    .y(d => d.y);

// and its usage (generating the d parameter)
...
.attr("d", d3.linkHorizontal().x(d => d.x).y(d => d.y));
...

I tried to implement this using the .linkRadial(), but without any luck, all I could manage is make the curvature bigger

  • I can submit more code if needed, the reason am not is because its mostly the basic d3 tree structure, and am doing some overwrites to implement the logic of drawing the tree with a "to-top" like effect so each branch is in one horizontal line

Edit: Managed to achieve this almost using the .linkVertical() for those links instead, but now I need the curves to be bigger so its more obvious. Reading the documentation I cant find any way to edit this..

hahaha
  • 1,001
  • 1
  • 16
  • 32
  • Could you add a [mre], preferrably in a snippet? It will make it a lot easier to answer your question – Ruben Helsloot Feb 22 '23 at 11:29
  • ill try and extract some things, as its a bit customized already so its not easy got lots of noise in the code :/ – hahaha Feb 22 '23 at 11:34
  • trying to extract it its actually quite complex. The reason is am overwriting lots of stuff, I have multiple parents, I reverse the tree, i.e. the tree is horizontal but goes from right to left. Maybe the reason its so complex is because I didnt use any d3 functions. To create the lines though I use the `d3.linkHorizontal` and `d3.linkVertical` functions – hahaha Feb 22 '23 at 11:44

1 Answers1

0

I managed to solve this drawing a custom link using the d3.path()

drawLinkCurve = (source: { x; y }, target: { x; y }) => {
    const context = d3.path();
    context.moveTo(source.x, source.y);
    context.bezierCurveTo(source.x - xAxisOffset, source.y - yAxisOffset, target.x + xAxisOffset, target.y + yAxisOffset, target.x, target.y);
    return context + '';
};

what this does, is create points at source.x - xAxisOffset, source.y - yAxisOffset, and at target.x + xAxisOffset, target.y + yAxisOffset which then draws the curve based on these points. (imagine the points having gravity)

hahaha
  • 1,001
  • 1
  • 16
  • 32