How to change edge connection points between nodes

问题:

I'm trying to code a visualization pipeline in VisJs. So I have a graph and some nodes. The nodes can generate/use a few different data types. So I need something like this

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

So one node has more than 1 anchor points that only connect to it's own type. Can I change the location from where the edges are drawn to where they are connected in the node? Does anyone know a better JS library to do this or can this be done with VisJs?

回答1:

Basically, you can't do this like you describe: each node has one point where all the edges come from/to and node shape hovering above it.

However, you can emulate this using hidden nodes: 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}
]);

which gives:

This isn't a nice approach if you want to manipulate such nodes (move via drag&drop), but if you need just a static visualization, this should work fine.