Question

我在生成图形后操作节点和边缘。我想在双击边缘时检索边缘值或标题。

nodes = [{id: 'TEST1',  value: 0, label: 'TEST1', title: TEST1'},
         {id: 'engine',  value: 0, label: 'engine', title: 'engine'}];

  // create connections between people
  // value corresponds with the amount of contact between two people
   edges = [{from: 'TEST1', to: 'engine', value: 4, title: '4 Connections'},];

我可以使用以下代码双击节点时获取节点的值。

network.on( 'doubleClick', function(properties) {
         alert('clicked node ' + properties.nodes[0]);
});

如何检索边缘的值？

Answer 1

像doubleClick这样的事件会为您提供一个包含边缘ID的列表。如果您的边缘没有ID，网络会在内部为它们生成一个，但您将无法在原始数据中匹配它们。

最好是在DataSet中创建数据，并为边缘指定一个ID：

var nodes = new vis.DataSet([
  {id: 'TEST1',  value: 0, label: 'TEST1', title: 'TEST1'},
  {id: 'engine',  value: 0, label: 'engine', title: 'engine'}
]);

var edges = new vis.DataSet([
  {id: 1, from: 'TEST1', to: 'engine', value: 4, title: '4 Connections'}
]);

network.on( 'doubleClick', function(properties) {
  var nodeIds = properties.nodes;
  console.log('node ids:', nodeIds);
  console.log('nodes:', nodes.get(nodeIds));

  var edgeIds = properties.edges;
  console.log('edge ids:', edgeIds);
  console.log('edges:', edges.get(edgeIds));
});

Answer 2

与答案相反，指出您的边缘应具有可找到的显式ID，而不必。

您应该只使用DataSet的{{1}}方法通过其ID查找元素，它也适用于内部ID。

get

Answer 3

在使用双击事件时如何在VIS.JS中检索边缘/点属性

正确识别单个节点，单个边缘或具有边缘的节点

事件为doubleClick时，可以尝试一下。

 network.on('doubleClick', function(properties) {


    var nodeIDs = properties.nodes;
    clickedNodes = nodes.get(nodeIDs);

    var edgesIDs = properties.edges;
    clickedEdges = edges.get(edgesIDs);

    var clickedType = 0;
    if (typeof clickedEdges != "undefined" &&
        clickedEdges != null &&
        clickedEdges.length != null &&
        clickedEdges.length > 0) {

        console.log("Edge:" + clickedEdges);
        clickedType = 2;

    }

    if (typeof clickedNodes != "undefined" &&
        clickedNodes != null &&
        clickedNodes.length != null &&
        clickedNodes.length > 0) {

        console.log("Node:" + clickedNodes);
        clickedType++;
    }
    //NODE ONLY
    if (clickedType == 1 ) {
      
        console.log(clickedNodes[0].id);
        //Do you Jquery here for Nodes
    }
    //EDGE ONLY
    if (clickedType == 2) {
       
        console.log(clickedEdges[0].id);
        console.log(clickedEdges[0].label);
         //Do you Jquery here for Edge

    };
    //NODE WITH EDGE
    if (clickedType == 3) {
        alert("single node or with edge ");
        console.log(clickedNodes[0].id);
        console.log(clickedEdges[0].id);
        //Do you Jquery here for Nodes
    }


});

在对象上，您可以添加任何其他属性键/名称并使用它们。

clickedNodes[0].id;
clickedNodes[0].device;

clickedEdges[0].id;
clickedNodes[0].ipaddress;

如何在vis.js中检索边值/标签？

3 个答案: