Vis.js:在react样式中添加showPopup

时间:2018-04-02 03:55:18

标签: javascript reactjs vis.js

我有一个关于vis.js弹出选项的问题。目前我正在尝试以反应方式实现它,所以我使用https://github.com/crubier/react-graph-vis/tree/master/example作为起点。

我意识到在src \ index.js文件中我可以添加事件数组,因为我意识到select选项就在那里。但是,当我执行以下操作时:

const events = {
  select: function(event) {
    var { nodes, edges } = event;
    console.log("Selected nodes:");
    console.log(nodes);
    console.log("Selected edges:");
    console.log(edges);
   },
  showPopup: function(event) {
     document.getElementById('root').innerHTML = '<h2>showPopup event</h2>'+ JSON.stringify(params, null, 4);
  }
};

我甚至根本无法触发弹出窗口。在lib \ index.js中,我注意到代码应该遍历事件数组:

  var _iteratorNormalCompletion2 = true;
        var _didIteratorError2 = false;
        var _iteratorError2 = undefined;

        try {
          for (var _iterator2 = Object.keys(events)[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
            var _eventName = _step2.value;
            this.Network.on(_eventName, events[_eventName]);
          }
        } catch (err) {
          _didIteratorError2 = true;
          _iteratorError2 = err;
        } finally {
          try {
            if (!_iteratorNormalCompletion2 && _iterator2.return) {
              _iterator2.return();
            }
          } finally {
            if (_didIteratorError2) {
              throw _iteratorError2;
            }
          }
        }
      }

我检查了vis.js有弹出选项,根据文档可以在这里找到:http://visjs.org/docs/network/

我目前只是想弄清楚如何触发弹出窗口。由于应用程序将基于它,因此需要使用react。如果有人可以指出我做错了什么,那就太好了。

提前致谢。 XD

注意:这个问题与我正在尝试构建的github项目有关。因此我有点不同,因为我没有采取准确的vis.js

1 个答案:

答案 0 :(得分:0)

你正在混淆。 {{1}}是一个事件,一个名为的函数,当显示弹出窗口时。你不要叫它显示弹出窗口。

要显示弹出窗口,只需将鼠标悬停在具有标题属性的节点上。

看看我制作的这个小提琴(尽管是纯粹的JS):http://jsfiddle.net/56t9c0t4/