如何使用 angularjs 更新 visjs 的节点或边属性？

Question

我需要根据某些数据隐藏或取消隐藏某些节点和边缘。我可以通过遍历 visjs 的数据来实现它，但是每次隐藏或取消隐藏时都会触发稳定（这会覆盖现有数据）。

我发现 this example 通过使用 add、update 和 remove 函数直接更改 nodes 值来添加、更新和删除节点。这在没有稳定的情况下动态地执行这些操作，但是当我在 AngularJS 中尝试相同的操作时，我遇到以下错误

org_nodes.update is not a function

摘自 this example

来源的片段

function addNode() {
    var newId = (Math.random() * 1e7).toString(32);
    nodes.add({id:newId, label:"I'm new!"});
    nodeIds.push(newId);
}

function changeNode1() {
    var newColor = '#' + Math.floor((Math.random() * 255 * 255 * 255)).toString(16);
    nodes.update([{id:1, color:{background:newColor}}]);
}

function removeRandomNode() {
    var randomNodeId = nodeIds[Math.floor(Math.random() * nodeIds.length)];
    nodes.remove({id:randomNodeId});

    var index = nodeIds.indexOf(randomNodeId);
    nodeIds.splice(index,1);
}

看看我的plunker which demonstrates this. What is it that I am missing here? Note - I am using angular-visjs

Answer 1

你打电话时似乎有点不对劲update。参照该示例，update 函数需要传递的参数是 new vis.DataSet。您改为提供一个简单的数组。我们可以通过几种方法来解决这个问题，但让我们在声明 $scope.data 时做出更改

$scope.data = {
    nodes: new vis.DataSet(org_nodes),
    edges: edges
};

现在我们已经完成了这个，在 $scope.agentClicked 中让我们修改我们的调用以引用我们的 vis.DataSet 对象

$scope.agentClicked = function() {
    $scope.data.nodes.update([ ... ]);
}

Plunker Link - 更新演示

Answer 2

似乎在 2022 年不再有效。我通过使用 updateClusterNode:

解决了这个问题

    for (const node of this.data.nodes) {
        this.network.updateClusteredNode(node.id, node);
    }

也许有更好的方法来强制更新节点数据。让我知道 ;-) .

如何使用 angularjs 更新 visjs 的节点或边属性？

How to update a node or edge property of visjs using angularjs?

javascript

html

angularjs

angularjs-directive

vis.js

如何使用 angularjs 更新 visjs 的节点或边 属性？

How to update a node or edge property of visjs using angularjs?

javascript

html

angularjs

angularjs-directive

vis.js

如何使用 angularjs 更新 visjs 的节点或边属性？