Vis.js：點擊修改節點屬性

Question

我在 Vis.js 中有一個無向圖，我想在選擇某個節點時更改相鄰節點的顏色和大小（根據 JS 數組中的值縮放它們）。 我該怎么做呢？ vis.js 網絡對象的文檔在本示例的源代碼之外沒有任何啟發。

Answer 1

您可以偵聽單擊事件以了解用戶何時單擊節點。

network.on("click", function (params) {
  console.log(params);
});

如果您在 DataSet 中創建了您的節點，您可以簡單地更新它們，網絡將相應地自動更新：

nodes.update({id: 4, label: "changed label"});

Answer 2

在回答這個問題時詳細說明這個答案。 vis.js->Network 文檔包含所有詳細信息，您只需將它們按順序排列即可。

您使用網絡實例的“on”方法來監聽事件。 請參閱上面鏈接中的“方法參考 -> 全局”。 這個“on”方法需要兩個輸入。 第一個是要監聽的事件； 第二個是指定事件發生時要采取的操作的函數。

要了解如何使用此信息，請參閱上面文檔鏈接中的“事件”部分。 對於點擊事件，您的代碼將類似於

network.on("click", function (params) {
  console.log(params);
});

第一個參數總是一個字符串； 在這種情況下，我們對“點擊”事件感興趣。 第二個參數是一個回調函數，它接受一個參數（我在上面的例子中稱這個參數為“params”）。 “事件”文檔（再次參見上面的鏈接）為您總結了這種結構。 具體來說，如果點擊事件與一個節點相關聯，那么被點擊的節點的 ID 可以作為 params.nodes[0] 訪問。

回到最初的問題。 要更改相鄰節點的顏色，您首先需要一個相鄰節點的數組。 您可以使用“getConnectedNodes”方法執行此操作（請參閱上面鏈接中的“方法參考 -> 信息”）。 這將為您提供一組節點 ID。 接下來，對於該數組中的每個 ID，您需要更新您希望更改的屬性。

更新節點屬性的最簡單方法是使用 DataSet 創建節點。 您可能已經這樣做了。 請參閱此示例，並注意以下幾行

var nodes = new vis.DataSet([...]);

這個nodes變量有它自己的update方法。 因此，如果您有（例如）一個變量CurrentID來保存您希望修改的節點的節點 ID，並且您想（例如）將該節點的標簽更改為存儲在另一個變量newLabel的文本字符串，您將做

nodes.update({id:CurrentID, label:newLabel});

Answer 3

非常感謝這些有用的回復； 問題之一是，如果使用網絡文檔示例，則可能已經創建自己的數據集的斷言可能是錯誤的，這些示例主要執行以下操作：

var nodeArr = [...];
var edgeArr = [...];
data = {nodeArr, edgeArr}
network = new vis.Network(container, data, options); 

update 函數僅在節點是Dateset而不是數組時才可用：

var nodeArr = [...];
var edgeArr = [...];
data = {new vis.DataSet(nodeArr), new vis.DataSet(edgeArr)}
network = new vis.Network(container, data, options);