问题
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.
来源:https://stackoverflow.com/questions/48892281/how-to-change-edge-connection-points-between-nodes-visjs