맞춤 아이템 캔버스를 지우는 방법 vis.js

vis.js로 dinamic 네트워크를 만들려고했는데 작성한 맞춤 항목을 지워야하지만 "clearRect()"를 사용하면 네트워크가 지워집니다. 클릭 기능의 코드맞춤 아이템 캔버스를 지우는 방법 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

맞춤 아이템 캔버스를 지우는 방법 vis.js

답변

관련 문제