时间戳

首页 > 解决方案 > 同一节点有两个自循环边缘时如何避免边缘重叠

javascript - 同一节点有两个自循环边缘时如何避免边缘重叠

问题描述

我在使用 Vis.js 库时遇到了这个问题。

我正在尝试创建一个具有两个自环边的节点。问题是边缘重叠并且标签不可读。

我试过改变一些物理参数，但没有运气。

这是我想要实现的目标：

// create an array with nodes
var nodes = new vis.DataSet([
    {id: 1, label: 'Node 1'},

]);

// create an array with edges
var edges = new vis.DataSet([
    {from: 1, to: 1, label: "0"},
    {from: 1, to: 1, label: "1"}


]);

// create a network
var container = document.getElementById('mynetwork');

// provide the data in the vis format
var data = {
    nodes: nodes,
    edges: edges
};
var options = {physics:{enabled:true}};

// initialize your network!
var network = new vis.Network(container, data, options);

从图像结果可以看出，标签重叠： https ://ibb.co/gmT8v8q

你有解决这个问题的方法吗？

提前致谢，

安德烈亚

标签： javascriptvis.jsvis.js-network

解决方案

尝试 Edges 的 selfReferences 属性中的角度参数。它将在节点圆的不同角度创建多个自身边缘。

    var data = {
nodes:
    [
        {id:1, label: "Entity 1", shape: 'circle'},

    ],
edges:
    [
        {"from":1,"to":1,"arrows":"to","label":"Prg", 
        selfReference:{
        size: 20,
        angle: Math.PI / 4,
        renderBehindTheNode: true
            } 
        },
        {"from":1,"to":1,"arrows":"to","label":"Boot", selfReference:{
        size: 20,
        angle: Math.PI / 1,
        renderBehindTheNode: true
            } },

    ]};

推荐阅读