Skip to content
Jan edited this page Jan 10, 2020 · 4 revisions

By default links have a length of 20 (defined in adaptor.ts).

The automatic layout will compute layout that tries to keep links (AKA edges) as close as possible to this length.

You can override this default length by setting the linkDistance function when you instantiate a d3adaptor, like so:

        var d3cola = cola.d3adaptor()
            .linkDistance(50)

Alternately, you can specify a function to get a length for each individual length however you like. For example, if your links each have their own length property:

        var d3cola = cola.d3adaptor()
            .linkDistance(function (l) { return l.length })

Another option is to use one of the built in functions (symmetricDiffLinkLengths or jaccardLinkLengths) to compute an ideal length for each link based on the graph structure around that link. Basically these functions, for each link, examine the neighbour sets of the source and target (call them a and b respectively) of that link and compute an ideal distance as follows:

symmetricDiffLinkLengths: sqrt(|a union b| - |a intersection b|)

jaccardLinkLengths: |a intersection b|/|a union b|

(see linklengths.ts for precise definition).

For example, in one of the webcola examples with a dense 'small world' network we use the following to create a bit more space around the hub nodes:

        cola
            .nodes(graph.nodes)
            .links(graph.links)
            .jaccardLinkLengths(40,0.7)
            .start(30);

Note that the jaccard/symmetric link lengths are actually computed in the start function, so you can (re)set links before or after setting the links themselves.

Clone this wiki locally