javascript - 自定义行 vivagraph.js 的长度

Question

如何在 vivagraph.js 中自定义行 [链接] 的长度有一个类似的代码

graphics.link(function(link){
                return Viva.Graph.svg('path')
                           **.attr('length', 5);**

                           ...

Answer 1

我认为链接的长度是由图表的布局引起的。据我所知，您可以使用常量布局设置布局并自行计算节点位置，如下所示，或者设置一个全局理想链接长度（springLength），在计算力导向布局时使用，如下所示。

var layout = Viva.Graph.Layout.forceDirected(graph, {
    springLength : 10
});

Answer 2

有关每个链接的自定义长度，请参见此示例：

https://github.com/anvaka/VivaGraphJS/blob/master/demos/other/customLinkLength.html

我将包括摘录——它包括向每个链接添加自定义数据，

graph.addLink(5, 6, { connectionStrength: 0.1 });

然后使用该自定义数据使用 springTransform 计算弹簧长度：

var idealLength = 90;
var layout = Viva.Graph.Layout.forceDirected(graph, {
               springLength: idealLength,
               springCoeff : 0.0008,
               gravity : -10,
               // This is the main part of this example. We are telling force directed
               // layout, that we want to change length of each physical spring
               // by overriding `springTransform` method:
               springTransform: function (link, spring) {
                    spring.length = idealLength * (1 - link.data.connectionStrength);
               }
});