问题描述
我正在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 (将#修改为@)