javascript - 如何更改节点 VisJs 之间的边缘连接点

Question

我正在尝试在 VisJs 中编写可视化管道。所以我有一个图表和一些节点。节点可以生成/使用几种不同的数据类型。所以我需要这样的东西

------------------
|     Node1      |
------------------
int           char
 |             |
 |             |
 |             |
 |             |
int  string   char
------------------
|     Node2      |
------------------

所以一个节点有超过 1 个锚点，这些锚点只连接到它自己的类型。我可以将绘制边缘的位置更改为它们在节点中的连接位置吗？有谁知道更好的 JS 库来做到这一点，或者这可以用 VisJs 来完成吗？

Answer 1

基本上，您不能像您描述的那样执行此操作：每个节点都有一个点，所有边都来自/到该点，并且节点形状悬停在其上方。

但是，您可以使用隐藏节点进行模拟：https ://jsfiddle.net/tjyvLbns/20/

var gap = 20; // distance from the center of the node to the new "anchor"
var nodes = new vis.DataSet([
     {id:1,label:"node 1", x:0,  y:0}
    ,{id:2,label:"node 1 left", x:-gap,y:0, hidden:true}
    ,{id:3,label:"node 1 right",x:gap,y:0, hidden:true}

    ,{id:4,label:"node 2", x:0,  y:100}
    ,{id:5,label:"node 2 left", x:-gap,y:100, hidden:true}
    ,{id:6,label:"node 2 right",x:gap,y:100, hidden:true}
]);
var edges = new vis.DataSet([
     {from:2, to:5}
    ,{from:3, to:6}
]);

这使：

如果您想操作此类节点（通过拖放移动），这不是一个好方法，但如果您只需要静态可视化，这应该可以正常工作。