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

时间:2019-03-07 16:53:08

标签: javascript vis.js vis.js-network

我正在尝试使节点可点击,但是它不起作用

我是javascript的初学者,因此请帮助我。 我使用了vis.js库。我想当有人点击节点时,它应该重定向到url中的网页。 我尝试通过给定的示例进行更改,但是没有用。

先谢谢您。

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);

  });
}

1 个答案:

答案 0 :(得分:0)

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

尝试:

error[E0106]: missing lifetime specifier
 --> src/main.rs:3:16
  |
3 |     state: &'a AppState,
  |                ^^^^^^^^ expected lifetime parameter

error[E0106]: missing lifetime specifier
 --> src/main.rs:6:20
  |
6 |     id: Option<&'a IdService>,
  |                    ^^^^^^^^^ expected lifetime parameter

error[E0106]: missing lifetime specifier
  --> src/main.rs:10:19
   |
10 |     services: &'a AppServices,
   |                   ^^^^^^^^^^^ expected lifetime parameter

您收到我被点击了吗?在控制台上?
您是否获得了点击的节点:?在控制台上?
您在控制台上遇到任何错误吗?