Vis.js网络：如何在canvas内点击添加节点？

Question

Manipulation methods of vis.js 只包括 addNodeMode()，但不包括 addNode()。我想知道是否有一些不错的方法可以在单击时创建节点。可能是通过操纵数据而不是网络本身？

当然可以去

network.on('click',function(params){
    if((params.nodes.length == 0) && (params.edges.length == 0)) {
        network.addNodeMode(); // doesn't add, one more click needed
        //# generate click in the same place. Use params.pointer.canvas
        //  or params.pointer.DOM to set appropriate coordinates
    }
})

但是我们还必须防止无限循环，因为我们在点击处理程序中生成点击事件..

Answer 1

您可以使用vis.DataSetclass的update方法动态添加节点。有关详细信息，请参阅此文档页面：https://visjs.github.io/vis-data/data/dataset.html

Answer 2

好的，这是我当前的实现：

...
data = ...
nodes = new vis.DataSet(data.nodes); // make nodes manipulatable
data = { nodes:nodes, edges:edges };
...
var network = new vis.Network(container, data, options);

network.on('click',function(params){
    if((params.nodes.length == 0) && (params.edges.length == 0)) {
        var updatedIds = nodes.add([{
            label:'new',
            x:params.pointer.canvas.x,
            y:params.pointer.canvas.y
        }]);
        network.selectNodes([updatedIds[0]]);
        network.editNode();
    }
})

它并不完美，因为它实际上创建了一个节点并开始对其进行编辑，因此如果我们取消编辑，该节点将保留。它还会创建不需要的节点阴影。但它已经是一个工作原型，足以开始使用。

Vis.js网络：如何在canvas内点击添加节点？

Vis.js network: how to add a node on click inside the canvas?

javascript

vis.js

vis.js-network