如何更改节点VisJ之间的边缘连接点 [英] How to change edge connection points between nodes VisJs

问题描述

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

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

因此，一个节点具有多个锚点，这些锚点仅连接到其自身的类型.我可以将绘制边缘的位置更改为节点中连接边缘的位置吗?有谁知道一个更好的JS库可以做到这一点，还是可以用VisJs做到这一点?

解决方案

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

但是，您可以使用隐藏节点进行模拟: 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}
]);

给出:

如果要操纵此类节点(通过拖放移动)，这不是一个很好的方法，但是如果您只需要静态可视化，则应该可以正常工作.

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?

解决方案

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.

这篇关于如何更改节点VisJ之间的边缘连接点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！