カスタムアイテムcanvasを消去する方法vis.js

私はvis.jsでdinamicネットワークを作成しようとしていますが、作成したカスタムアイテムを消去する必要がありますが、 "clearRect（）"ネットワークを消去すると、クリック機能のコードカスタムアイテムcanvasを消去する方法vis.js

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(); 
     } 
    }); 
});

出典

2016-07-22 imaginerz

キャンバスを変更するだけでは不十分です。基礎となるデータ構造を変更する必要があります。

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>

出典

2016-07-27 09:15:55 mojoaxel

カスタムアイテムcanvasを消去する方法vis.js

答えて

関連する問題