如何使vis.js中的节点可点击?

问题描述 投票:0回答:1

我试图使节点可点击,但它无法正常工作

我是javascript初学者所以请帮助我。我使用过vis.js库。我想当有人点击节点然后它应该重定向到网址中的网页。我尝试通过给定的示例进行更改,但它无法正常工作。

先感谢您。

var graph ={nodes:[{id:0,group:'Mission Learning',label:"Content Tech + QA",url:'http://www.youtube.com',shape:'box'},{id:1,group:'Mission Learning',label:"Content Hygiene / Launch Automation",url:'http://www.google.com',shape:'box'}],edges:[{from:0,to:1}]};
function destroy() {
  if (network !== null) {
    network.destroy();
    network = null;
  }
}

function draw() {
  destroy();

  var nodes = graph.nodes;
  var edges = graph.edges;
  // randomly create some nodes and edges

  // create a network
  var container = document.getElementById('mynetwork');
  var data = {
    nodes: nodes,
    edges: edges
  };

  var options = {
    edges:{
           color:{color:'white'},
           width: 2,
           arrows: {
                    to: {enabled: true, scaleFactor:.5, type:'arrow'}
           }

    },
    nodes: {
      borderWidth:2,
      size:50,
      color: {
       border: '#222222',
       background: 'grey'
      },
      font:{color:'black',
       size: 40,
       face :'arial',
      },
      margin: {
       top: 20,
       bottom: 20,
       left: 20,
       right: 20
      }
    },
    physics: {
      forceAtlas2Based: {
          gravitationalConstant: -350,
          centralGravity: 0.05,
          springLength: 400,
          springConstant: 0.01,
          avoidOverlap:10
      },
      maxVelocity: 20,
      minVelocity:0,
      solver: 'forceAtlas2Based',
      timestep: 0.10,
      stabilization: {enabled:false,iterations: 0}
    },
    interaction: {
      multiselect: true,
      dragView: true
    }, 
    edges: {
      smooth: false,
      arrows: {to : true }
    }
  };
  network = new vis.Network(container, data, options);

  network.on( 'click', function(properties) {
    var ids = properties.nodes;
    var clickedNodes = nodes.get(ids);
    console.log('clicked nodes:', clickedNodes);

  });
}

javascript vis.js vis.js-network
1个回答
0
投票

你有什么问题? 您的代码是否达到了点击事件?

尝试:

network.on( 'click', function(properties) {
  console.log('I\'m clicked');
  var ids = properties.nodes;
  var clickedNodes = nodes.get(ids);
  console.log('clicked nodes:');
  console.log(clickedNodes);
});

你点击了我吗?在控制台? 你得到点击的节点:?在控制台? 你在控制台上有任何错误吗?

© www.soinside.com 2019 - 2024. All rights reserved.