Блог

Я работаю над макетом в 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,
    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}));