Determine length of links individually

GoJS
1

Hi,

I am working with a force directed layout in which Nodes and Links are visualized.
I was wondering however, if it is possible to determine the length of the links individually, instead of using defaultSpringLength. I want to be able to determine the length of all arrows individually.
Is this possible and if so, how should this be done?

See picture for an idea of what I want to change:

linklength
linklength603×539 19.5 KB

2

The length of a link is determined by the distance between the two connected nodes. (There are also other factors, such as where the ports are on the nodes, what spots are used, and whether the link is curved. But I assume you are not talking about those kinds of issues.)

So I think what you are really asking is how to try to have some links to be shorter and how to have some links be longer, without trying to force them to be of any particular length, or even within some range of lengths.

You can achieve that by overriding the ForceDirectedLayout.springLength method: ForceDirectedLayout | GoJS API

That method takes a ForceDirectedEdge as an argument, so you can look at its LayoutEdge.fromVertex and LayoutEdge.toVertex property values to decide what length to return. For example, you might want to look at the LayoutVertex.node property or its Node.data property to decide to return a shorter value if the node is gray.

3

Hi Walter,

Thank you for your answer.
I have looked at the link multiple times, but I do not really understand how I can achieve overriding the ForceDirectedLayout.springLength method.
A note to be made here: I am not very experienced in programming and quite new to this field.
Could you maybe explain a bit more how this overriding should be done?

4

Here is an example of overriding ForceDirectedLayout.electricalCharge. Take a look at the implementation of Friend Star, ForceDirectedLayout You might want to override that method as well as ForceDirectedLayout.springLength.

It defines a subclass of ForceDirectedLayout. That code is ES5 JavaScript, but I don’t even know what language you are writing in, so maybe ES6 code would be more suitable for you.

Assuming old JavaScript, maybe you want something like:

    function CustomLayout() {
      go.ForceDirectedLayout.call(this);
    }
    go.Diagram.inherit(CustomLayout, go.ForceDirectedLayout);

    CustomLayout.prototype.springLength = function(e) {
      if (e.fromVertex.node && e.fromVertex.node.data.color === "gray" &&
          e.toVertex.node && e.toVertex.node.data.color === "gray") return 40;
      return 120;
    }
    CustomLayout.prototype.electricalCharge = function(v) {
      if (v.node && v.node.data.color === "gray") return 20;
      return 100;
    }

Use this custom layout when setting Diagram.layout. For example:

$(go.Diagram, . . .,
  {
    layout: $(CustomLayout, { . . . }),
    . . .
  })
5

Dear Walter,

Thank you for your explanation, I was able to solve the problem!