javascript - ¿Cómo actualizar un nodo o propiedad de borde de visjs usando angularjs?
html angularjs-directive (1)
Tengo un requisito para ocultar o mostrar algunos nodos y bordes dependiendo de algunos datos. Puedo lograrlo atravesando los datos de visjs pero eso disparará la estabilización cada vez que uno oculta o muestra (esto sobrescribe los datos existentes).
Encontré este ejemplo que agrega, actualiza y elimina un nodo al cambiar directamente el valor de los nodes
mediante el uso de funciones de add
, update
y remove
. Esto hace dinámicamente estas operaciones sin estabilizar, pero cuando intento lo mismo en AngularJS encuentro el siguiente error
org_nodes.update no es una función
Fragmento tomado de la fuente de este ejemplo
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);
}
Mira mi plunker que demuestra esto. ¿Qué es lo que me falta aquí? Nota: estoy usando angular-visjs
Parece que está un poco apagado al llamar a la update
. En referencia a ese ejemplo, la función de update
requiere un argumento pasado que es un new vis.DataSet
. En su lugar, está suministrando una matriz simple. Podemos abordar esto de $scope.data
maneras, pero hagamos el cambio al declarar $scope.data
como tal
$scope.data = {
nodes: new vis.DataSet(org_nodes),
edges: edges
};
Ahora que hemos hecho esto, dentro de $scope.agentClicked
vamos a modificar nuestra llamada para hacer referencia a nuestro objeto vis.DataSet
$scope.agentClicked = function() {
$scope.data.nodes.update([ ... ]);
}
Plunker Link - demo actualizada