vis.jsの外部ボタンをクリックすると、ノードを動的に強調表示する必要があります

Question

vis.jsの外部ボタンをクリックすると、ノードを動的に強調表示する必要があります。ノードのハイライトに基づいて、私はいくつかのグラフィカル指向のチャット

を表示する必要がある画像

を参照してください。このために助けてください。アドバンスあり

Answer 1

ノードの強調表示に関して、実際にノードの周りに何かを描く必要がなく、ノードをある方法で強調表示することに興味がある場合は、 'neighborshood highlight'たとえば、vis.jsドキュメント（http://visjs.org/examples/network/exampleApplications/neighbourhoodHighlight.html）の例では、他のすべてをグレー表示して実際にノードをハイライトしています。これは、強調表示されたノードのロールオーバーイベントの処理と組み合わせて、特定のノードごとに興味のあるものを表示することができます。

Answer 2

また誰かがupdate方法でノードの色を変更することができる：

nodes.update([{id: 1, color: {background: '#RRGGBB'}}]); 
// nodes is of type vis.DataSet 

例（example from vis.js documentationのおかげで）：

const container = document.getElementById('container'); 
 
const nodes = new vis.DataSet([{id: 1, label: 'Node'}]); 
 
const data = {nodes}; 
 
const options = {}; 
 
const network = new vis.Network(container, data, options); 
 

 
const button = document.getElementById('button'); 
 
button.addEventListener('click',() => { 
 
    const randomHexRGB = '#' + Math.floor((Math.random() * 255 * 255 * 255)).toString(16); 
 
    const colorNew = {background: randomHexRGB}; 
 
    nodes.update([{id: 1, color: colorNew}]); 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.js"></script> 
 
<button id="button">Change node color</button> 
 
<div id="container"></div>