Dynamic change of colour without redrawing => brushing/linking

[jandot]

Hi @vesturiano,

Thanks for creating this module. Finally something that can display our large graphs.
We're building some visualisations with multiple panels (i.e. a force-graph and a simple scatterplot), and implemented brushing/linking from the scatterplot towards the graph: when selecting a point in the scatterplot, the corresponding node in the graph gets a different colour. We do this by setting a "selected" property to true, and referencing that in .nodeColor: .nodeColor(node => { if (node.selected) {return "red"} else {return "steelblue"} } )

However, every time we select another datapoint, the graph is redrawn. We have not found a way to change the colour of nodes dynamically without initialising the graph layout again.

Can you tell us if we're missing something? Or is this not possible (yet)?

Thank you!
jan

.

[vasturiano]

Hi @jandot, thanks for reaching out.

It's not clear which actions you are performing on your brushing interaction, in what concerns the graph component. But, if all you do is re-invoke .nodeColor(...) with your new node color logic, the graph should not re-heat and simply affect the styling of the nodes.

If you're still having issues, it's probably easier to debug if you create a simple demo on https://codepen.io.

[jandot]

This codepen does what I mean: https://codepen.io/jandot/pen/KKXNMyd It externally changes the nodes array and gets that reflected in the network itself. Indeed, it works as it should.
In my actual application I'm using svelte instead of regular javascript. The issue seems to be with the interplay between both. Your reply did give me some ideas to tackle this, thank you.

[jandot]

Problem fixed