如何擦除自定义项目画布 vis.js答案

【问题标题】：How to erase custom item canvas vis.js如何擦除自定义项目画布 vis.js
【发布时间】：2016-07-22 20:25:15
【问题描述】：

我正在尝试使用 vis.js 创建动态网络，我需要擦除创建的自定义项，但是当我使用“clearRect()”擦除我的网络时，这是我的点击功能代码

network.on("click", function (params) {

    network.on("afterDrawing", function (ctx) {
        ctx.clearRect(0, 0, 1200, 1600);
        var nodeId = params.nodes[0];
        if(nodeId != undefined)
        {
            var nodePosition = network.getPositions([nodeId]);
            ctx.strokeStyle = '#294475';
            ctx.lineWidth = 4;
            ctx.fillStyle = '#A6D5F7';
            ctx.circle(nodePosition[nodeId].x, nodePosition[nodeId].y, 20);
            ctx.fill();
            ctx.stroke();
        }
    });
});

【问题讨论】：

标签： canvas erase vis.js

【解决方案1】：

改变画布是不够的。您必须更改底层数据结构。

请查看official dynamicData Example。

这是一个简单的点击删除节点的例子：

var nodes = new vis.DataSet([
  {id: 1, label: 'Node 1'},
  {id: 2, label: 'Node 2'},
  {id: 3, label: 'Node 3'},
  {id: 4, label: 'Node 4'},
  {id: 5, label: 'Node 5'}
]);

var edges = new vis.DataSet([
  {from: 1, to: 3},
  {from: 1, to: 2},
  {from: 2, to: 4},
  {from: 2, to: 5}
]);

// create a network
var container = document.getElementById('mynetwork');
var network = new vis.Network(container, { 
  nodes: nodes,
  edges: edges
}, {});

network.on("click", function (params) {
  params.nodes.forEach(function(nodeId) {
    nodes.remove({id: nodeId});  
  });    
});

#mynetwork {
  width: 100%;
  height: 100%;
  border: 1px solid black;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="//cdnjs.cloudflare.com/ajax/libs/vis/4.16.1/vis.min.js"></script>
  <link href="//cdnjs.cloudflare.com/ajax/libs/vis/4.16.1/vis.min.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="mynetwork"></div>
</body>
</html>

【讨论】：