search

shutterstock / rickshaw

JavaScript toolkit for creating interactive real-time graphs
https://shutterstock.github.io/rickshaw
MIT License
6.53k stars 941 forks source link

Rerender should not remove the old graph first #357

Open dwt opened 10 years ago

dwt commented 10 years ago

Hi there,

while looking through the render implementation I noticed that rickshaw always removes the full graph before recreating it on rerender.

I believe that the philosophy of d3 on the other hand would be that you join a set of dom nodes with the data and then when the data changes (or you rerender because of any reason) the entered and exited nodes should be handled by the code instead of just recreating the full graph.

Can you expand on the reasoning for this? Would you like to change this to be nearer to 'the d3 way'?

It seems to me that doing nice animations when new data arrives is way harder when removing the graph and building it anew on each re-render - which is something we'd like to look into not too far into the future.

dchester commented 10 years ago

I agree it seems a shame to wipe everything out and start from scratch for each call to graph.render(). But in the case of line graphs and area graphs do we have a better option? With a line for example, we'll likely end up entirely recreating the d attribute of the path element when we add new data points. So we could reuse existing path elements for each series, and if that seems worthwhile, we can pursue that. But since we're not adding new DOM nodes for each new data point (at least for lines and area graphs), is there much more upside to be had?

Would you like to change this to be nearer to 'the d3 way'?

Yes, if there's a way forward that's more in line with the d3 philosophy, that's more efficient, that enables animations, that sounds interesting. We haven't really tried to optimize here yet. For bars and scatterplots at least, I'm sure we can do better.

dwt commented 10 years ago

I haven't played with line graphs and d3 a lot yet, but I seem to remember that even for line graphs d3 can interpolate the 'd' attribute to enable nice animations there when data points change / are added. Should I stumble over this again, I'll post a link here.

Regarding plots that do create multiple dom elements: Good to know this, so when we experiment we can go into the direction of getting rid of the selectAll().remove().