Dynamically change the Sankey diagram link's stroke width


I am working on a project that needs to show the evolution of the Sankey Diagram along with the time.

This means I have a slide bar to control the time spam, and I want to show the width of the link that is changing with animation when I slide the time bar. There are incoming inputs when slide the bar, the input is for the data model.

What I’ve done is based on the example code that is in here. http://gojs.net/latest/samples/sankey.html

To change the width of the link, I tried used the binding first.
new go.Binding(“strokeWidth”, “width”),
But this one does’t work.

Then I tried to reload the model. So I programmatically changed the JSON that is feed to the model. And reload the model. This one works. But the problem is the position of nodes and the layout of diagram is changed along with the data model with a screen refresh, which makes it is not clear to see which link has been changed.

So I am wondering is there a way to change the width of the link and the height of the node without re-positioning the nodes and refreshing the screen? I want to animate this. E.g, the user can clearly see which link is shrinking or expanding, which node is growing bigger or becoming smaller along with the incoming inputs.


First, if you are worried about a layout happening again, set Layout.isOngoing to false.

Second, are you calling Model.setDataProperty to modify the linkdata.width? Alternatively you can modify the link shape strokeWidth directly. This might be easier because…

Third, the Sankey layout is responsible for setting the node shape heights. You’ll need to modify them explicitly since the layout won’t be running again.