Question

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

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

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

我的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,
    x: -50,
    y: 50
  },
  {
    type: 'A',
    name: 'A node 3',
    index: 2,
    x: -150,
    y: 50
  },
  {
    type: 'A',
    name: 'A Node 4',
    index: 3,
    x: 50,
    y: 50
  },
  {
    type: 'A',
    name: 'A Node 5',
    index: 4,
    x: -50,
    y: 150
  },
  {
    type: "B",
    name: 'B Node 1',
    index: 5
  },
  {
    type: "B",
    name: 'B Node 2',
    index: 6
  },
  {
    type: 'B',
    name: 'B Node ',
    index: 7
  },
    {
    type: 'B',
    name: 'B Node ',
    index: 8
  },
      {
    type: 'B',
    name: 'B Node ',
    index: 9
  },
      {
    type: 'B',
    name: 'B Node ',
    index: 10
  },
      {
    type: 'B',
    name: 'B Node ',
    index: 11
  },
      {
    type: 'B',
    name: 'B Node ',
    index: 12
  },    {
    type: 'B',
    name: 'B Node ',
    index: 13
  },
];

const edgeData = [
    {from: 0, to: 1},
  {from: 1, to: 2},
  {from: 1, to: 3},
  {from: 1, to: 4},
  {from: 2, to: 5},
  {from: 3, to: 6},
  {from: 4, to: 7},
  {from: 4, to: 8},
  {from: 4, to: 9},
  {from: 4, to: 10},
  {from: 4, to: 11},
  {from: 4, to: 12},
  {from: 4, 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}));

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

0 个答案: