Change node color on mouse event

[quentinflahaut]

Changing the color node can be done via
gaph.addNode(nodename, nodedata)
however, when i call this operation during an event, the graph dispay weird position on my node.

I believe that it happen because the graph delete the node and then recreate it losing the last position. And then position are setted again once the event is finish.

Could you give me an idea how to manage this problem ?

[anvaka]

Hello @quentinflahaut. Are you using webgl or svg renderer? If all you need is changing a node color, I'd recommend to update its ui properties, instead of updating a model. If you can share a jsfiddle link, I'll be able to help

[quentinflahaut]

@anvaka Thank you for your reply.
I made a jsfiddle, here is my link: http://jsfiddle.net/2LQmB/1/
i commented on line 48

[anvaka]

Hi @quentinflahaut, sorry I was completely busy last couple months. Hope it's not to late to give an answer.

Since you are using svg, you can change fill as you would normally do:

img.attr('fill', 'deepskyblue');

I updated the fiddle: http://jsfiddle.net/anvaka/2LQmB/3/

[ArnauC]

Sorry, what about the case where using webGL?
Is it posible to change dinamically the color of the nodes?

[anvaka]

@ArnauC you can use webglSquare when you create a node. It accepts second argument as a color of a node. Here is the demo: Source Code; Interactive example

[ArnauC]

But I don't see how can I change the color of a node dynamically. Something like:

var events = Viva.Graph.webglInputEvents(graphics, graph);
events.mouseEnter(function (node) {
changeColor(node);
}).mouseLeave(function (node) {
resetColor(node);
})

How can I define a method changeColor that accesses the node and change its color?

[anvaka]

@ArnauC you can use approach similar to the multiselect example:

var nodeUI = graphics.getNodeUI(nodeId);
nodeUI.color = 0xFFA500FF;

Where graphics is your instance of Viva.Graph.View.webglGraphics(). Just keep in mind, if the graph is stable, you'll need to give a hint to renderer, that some colors are changed and it needs to refresh:

renderer.rerender()

Demo