Question

如何在vivagraph.js中自定义行[links]的长度有像

这样的代码

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

                           ...

Answer 1

我认为链接的长度是由图形的布局产生的。据我所知，您可以使用常量布局设置布局并自行计算节点位置as shown here或设置全局理想链接长度（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);
               }
});

自定义行的长度vivagraph.js

2 个答案: