我试图用vis.js创建dinamic网络,我需要删除创建的自定义项,但当我使用"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();
}
});
});
仅仅更改画布是不够的。您必须更改基础数据结构。
请查看官方的dynamicData示例。
这里有一个简单的例子,点击删除节点:
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>