在VisJS中为边缘标签设置z-index

问题描述

我正在VisJS中处理涉及许多节点的布局。当边缘悬停时,我有想要显示的文本,然后在休假时隐藏。

当节点拥挤并且边缘标签碰到其中时,它们当前正在显示,因此它们位于节点下方而不是上方。有什么方法可以设置边缘标签的z索引,使它们显示在节点的顶部而不是节点的下面?

我已经阅读了大量文档,还没有发现可能改变z索引位置的任何内容。任何黑客或解决方法都将受到欢迎。谢谢!

工作JSFiddle

我的visjs代码

const root = document.querySelector('#graph');

const nodeData = [
    {
    type: "A",name: 'A Node 1',index: 0,x: -50,y: -50
  },{
    type: 'A',name: 'A node 2',index: 1,y: 50
  },name: 'A node 3',index: 2,x: -150,name: 'A Node 4',index: 3,x: 50,name: 'A Node 5',index: 4,y: 150
  },{
    type: "B",name: 'B Node 1',index: 5
  },name: 'B Node 2',index: 6
  },{
    type: 'B',name: 'B Node ',index: 7
  },index: 8
  },index: 9
  },index: 10
  },index: 11
  },index: 12
  },index: 13
  },];

const edgeData = [
    {from: 0,to: 1},{from: 1,to: 2},to: 3},to: 4},{from: 2,to: 5},{from: 3,to: 6},{from: 4,to: 7},to: 8},to: 9},to: 10},to: 11},to: 12},to: 13},]

const options = {
    physics: {
      barnesHut: {
        avoidOverlap: 1,springConstant: 0.3
      },solver: 'hierarchicalRepulsion'
    },layout: {
    randomSeed: '0:0'
  }
};

const nodes = new vis.DataSet(nodeData.map(d => {
    const newNode = {
    id: d.index,label: d.name,fixed: d.type === 'A'
  }
  if (typeof d.x === 'number') {
    newNode.x = d.x;
  }
  
  if (typeof d.y === 'number') {
    newNode.y = d.y;
  }
  
  if(d.type === 'A') {
    newNode.color = 'orange';
    newNode.mass = 3;
  }
  return newNode;
}));
const edges = new vis.DataSet(edgeData.map(e => {
    return {...e,smooth: false,label: 'edge from node to node'}
}));
const network = new vis.Network(root,{nodes,edges},options);

network.on('stabilizationIterationsDone',() => network.setoptions({physics: false}));

解决方法

暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!

如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@)