javascript - How to update a node or edge property of visjs using angularjs? - Stack Overflow

admin管理员组

文章数量:1357646

I have a requirement to hide or unhide some nodes and edges depending on some data. I can achieve it by traversing through visjs's data but that will trigger stabilization everytime one hides or unhides (this overwrite existing data).

I found this example which adds, updates and removes a node by directly changing nodes value by using add, update & remove functions. This dynamically does these operations without stabilizing, but when I try the same thing in AngularJS I encounter the following error

org_nodes.update is not a function

Snippet taken from source of 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);
}

Check out my plunker which demonstrates this. What is it that I am missing here? Note - I am using angular-visjs

I have a requirement to hide or unhide some nodes and edges depending on some data. I can achieve it by traversing through visjs's data but that will trigger stabilization everytime one hides or unhides (this overwrite existing data).

I found this example which adds, updates and removes a node by directly changing nodes value by using add, update & remove functions. This dynamically does these operations without stabilizing, but when I try the same thing in AngularJS I encounter the following error

org_nodes.update is not a function

Snippet taken from source of 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);
}

Check out my plunker which demonstrates this. What is it that I am missing here? Note - I am using angular-visjs

• javascript
• html
• angularjs
• angularjs-directive
• vis.js

Share Improve this question Follow edited Dec 15, 2015 at 19:52 rene 42.5k7878 gold badges121121 silver badges165165 bronze badges asked Jul 2, 2015 at 11:16 user801116user801116

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3 +100

You appear to be slightly off when calling update. Referring to that example, the update function requires an argument passed that is a new vis.DataSet. You are instead supplying a simple array. We can approach this a couple of ways, but let's make the change when declaring $scope.data as such

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

Now that we have done this, within $scope.agentClicked lets modify our call to reference our vis.DataSet object

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

Plunker Link - updated demo

Seems not to work anymore in 2022. I worked around this by using updateClusterNode:

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

Maybe there is a better way to force an update of nodes data. Let me know ;-) .

本文标签： javascriptHow to update a node or edge property of visjs using angularjsStack Overflow