How to Draw S-shaped links between two Nodes?

GoJS
1

Please look at the chart below.The line between two nodes looks like “S”.
How to Realize with Gojs？

Another problem is:
The color of the line is gradient.From “#1876D7” to “#1ED2F0”
Can this effect be achieved with Gojs

image
image.jpg768×728 86.2 KB

2

Yes, set:

{
  curve: go.Link.Bezier,
  fromSpot: go.Spot.BottomSide,
  fromEndSegmentLength: 30,
  toSpot: go.Spot.TopSide,
  toEndSegmentLength: 30
}

You may want to adjust the 30 value to meet your tastes.

To get a color gradient effect, specify the Shape.fill to be a Gradient Brush: GoJS Brushes -- Northwoods Software

3

Look at the picture below. I adjusted the 30 value, but the lines look ugly.
Can you adjust the radian / curvature by setting other attributes?
In short, make line B and C look as beautiful as line A.

image
image.jpg2048×806 135 KB

4

You haven’t set Link.routing, have you? Don’t.

What are you using for the end segment lengths? I suggest a smaller value.

5

image
image.png1806×1780 491 KB

6

As I said, you should not be setting Link.routing.

Here’s what I just tried:

  function init() {
    var $ = go.GraphObject.make;

    myDiagram = $(go.Diagram, "myDiagramDiv");

    myDiagram.nodeTemplate =
       $(go.Node, "Auto", { width: 150 },
         $(go.Shape,
           { fill: "white" },
           { portId: "", fromSpot: go.Spot.BottomSide, toSpot: go.Spot.TopSide },
           new go.Binding("fill", "color")),
         $(go.TextBlock, { margin: 8 },
           new go.Binding("text"))
       );

    myDiagram.linkTemplate =
      $(go.Link,
        { curve: go.Link.Bezier, fromEndSegmentLength: 30, toEndSegmentLength: 30 },
        $(go.Shape),
        $(go.Shape, { toArrow: "Standard", scale: 0.7 })
      );

    myDiagram.model = new go.GraphLinksModel(
      [
        { key: 1, text: "Alpha", color: "lightblue" },
        { key: 2, text: "Beta", color: "orange" },
        { key: 3, text: "Gamma", color: "lightgreen" },
        { key: 4, text: "Delta", color: "pink" }
      ],
      [
        { from: 1, to: 2 },
        { from: 1, to: 3 },
        { from: 1, to: 4 }
      ]);
  }

I didn’t bother trying to style the nodes in the same manner, since that doesn’t matter for this topic. The results were:

image
image.png788×244 16.3 KB

7

I run a copy of your code and the results are as follows：
Strangely, the lines are obviously different from yours.
image

8

I’m sorry – that’s my fault. I seem to have copied the wrong version of the code. I have updated the code above. The node template (or the link template) was missing setting the fromSpot and toSpot.