vis.js onclick不显示当前节点

Question

我在javascript中创建一个应用程序来处理来自json对象的数据并显示它并以漂亮的方式过滤它。 example1 example2

然而，当我更深入到下一个选择时，我遇到了各种各样的问题。问题是我的<Redirect to="/somePublicUrl" />事件仍然与旧节点列表同步，而不是新节点列表。正如您从屏幕截图中看到的那样，在正确的节点上出现一个花曾经是一个问题，但我通过将id映射到坐标找到了一个脏的黑客。然而，我想最终解决这个问题，因为它真的令人沮丧。

http://shrani.si/f/2E/Tb/1bQrSkhW/firstlevel.png

http://shrani.si/f/3u/dO/4uPNhGCt/secondlevel.png

正如您所看到的那样，图表本身会更新，但点击事件仍然表示我点击了一个不存在的节点。

我可能会尽可能多地粘贴代码，因此这里是主要部分：

onclick

以下是我用来更新的一些功能：

currentRows = []
shistory = []
keyhistory = []
prototypeKeys = Object.keys(podatki)

//For flower selection
openSubselection = false;
openNode = null;

firstkeyid = 3;
currentKey = prototypeKeys[firstkeyid];
unavailableKeys = [];
//availableKeys = {0 : {name: nameofkey, available: true}}
availableKeys = genAvailable(prototypeKeys, firstkeyid)


keys = ["domenskiProstor", "sistemNaziv"]

selectedNodes = []

kc = 0
first_key = keys[kc]

for (var k = 0; k < Object.keys(podatki[first_key]).length; k++) {
  var templ = []
  for (key in podatki)
    templ.push(podatki[key][k]);
  currentRows.push(templ)
}

shistory.push(currentRows)
keyhistory.push(first_key)
nodes = genNodes(first_key)
edges = genEdges(nodes)

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

var width = 1000;
var height = 800;

var options = {
  width: width + 'px',
  height: height + 'px',
  nodes: {
    shape: 'ellipse'
  },
  edges: {
    smooth: true
  },
  physics: false,
  interaction: {
    dragNodes: true,// do not allow dragging nodes
    zoomView: true, // do not allow zooming
    dragView: true  // do not allow dragging
  }
};

var network = new vis.Network(container, data, options);
centerNetwork();

function setEvents() {
  network.on('click', function (properties) {
    //console.log(network.data.nodes)
    //console.log(openSubselection)
    //najdi v svojem novem seznamu GENIUS!
    // https://stackoverflow.com/questions/35563147/vis-js-network-graph-not-updating-with-node-changes

    var ids = properties.nodes;
    var clickedNode = nodes.get(ids)[0];
    console.log(nodes);

    var newl = []
    try {
      if (openSubselection) {
        if (clickedNode.id < 0) {
          for (ind in currentRows)
            if (currentRows[ind].indexOf(selectedNode.label) > -1)
              newl.push(currentRows[ind]);

          currentRows = newl;
          shistory.push(currentRows);
          //select the next key and do house keeping / house keeping exists also when we exist etc. - TODO
          //main problem with available keys now - will fix in future

          var somekey = clickedNode.label;


          //make current key unavailable

          for (var k in availableKeys)
            if (availableKeys[k].name == somekey) {
              availableKeys[k].available = false;
              currentKey = availableKeys[k].name
            }

          kc++
          openSubselection = false;
          openNode = null;
          updateNetwork()
          updateTable()

        } else {
          throw "flower closing"
        }
      } else {

        if (clickedNode.id != 1) {
          console.log(clickedNode.label)
          console.log(clickedNode.id)
          if (clickedNode.title == 1) {
            console.log("just 1 lool");
          } else {

            openSubselection = true;
            selectedNode = clickedNode;

            //get available keys
            var ak = []
            for (var k in availableKeys)
              if (availableKeys[k].available == true)
                ak.push(availableKeys[k].name);

            var na = ak.length;
            var angle = (360 / na) * 0.0174532925
            for (var k = -1; k >= -na; k--) {

              data.nodes.update({ id: k, y: (Math.sin((-k) * angle) * 100) + ncords[clickedNode.id].y, x: (Math.cos((-k) * angle) * -100) + ncords[clickedNode.id].x, label: ak[(k * -1) - 1] })
              data.edges.update({ id: k, from: clickedNode.id, to: k, arrows: 'to' });
            }

            network.setData({ nodes: data.nodes, edges: data.edges })
          }
        }
      }
    } catch (err) {
      deleteFlower();
    }
  });

  network.on('doubleClick', function (properties) {
    var ids = properties.nodes;
    var clickedNode = nodes.get(ids)[0];

    if (clickedNode.id == 1) {
      if (shistory.length > 1) {
        shistory.pop()
        currentRows = shistory[shistory.length - 1]

        //go back - TODO
        //currentKey = unavailableKeys.pop();
        for (var k in availableKeys)
          if (currentKey == availableKeys[k].name)
            availableKeys[k].available = true;

        currentKey = clickedNode.label;
        console.log("going back and currentKey became " + clickedNode.label)
        //make current key available again
        //availableKeys.push(currentKey) //this pushes wrong key 

        kc--
        updateNetwork()
        updateTable()
      }
    } else {
    }
  })
}
setEvents();

我认为我应该以某种方式动态地将我的事件处理程序放在某处，但我不确定如何并且正在寻找一些好的建议。