andredumas / techan.js

A visual, technical analysis and charting (Candlestick, OHLC, indicators) library built on D3.
http://techanjs.org/
MIT License
2.4k stars 534 forks source link

Switch Data Series #49

Closed bigterminal closed 8 years ago

bigterminal commented 9 years ago

I've been unsuccessful in being able to update the graph's data, assuming a fresh data array is utilized. Outside of deleting the line chart (haven't tried candlestick) and appending a new one, it would nice to be able to transition, add new data and update the graph similar to this simple example: http://bl.ocks.org/d3noob/7030f35b72de721622b8

I have no problem feeding new data to the end of the graph and shifting the graph because the x and y rescaling is similar to vanilla d3 but actual changing the data in the graph doesn't seem possible when using techan functions versus basic d3.

Would appreciate advice if i'm missing how to accomplish this, but otherwise would recommend it as a feature. Look forward to response. Thanks!

andredumas commented 9 years ago

You're not missing anything, you've hit a library weak point ;)

The problem is described in detail in some of the answers here: http://stackoverflow.com/questions/22774130/selectall-works-only-once-in-d3

In short, when setting new data on an already rendered (entered and appended) plot, the new data is not forcedly rebound down to existing descendants. This was not done previously due to the potential huge number of descendants causing performance issues on quick updates, but since there's been a few performance related enhancements (#38) this may no longer be an issue. Correctly fixing this will also help with nicer d3 transitions #4.

I got around this with a cheat in the feeds example by not using a fresh array, but updating the existing one already bound. This should also work for you until it's fixed properly.

henryfw commented 1 year ago

I think I got around it by removing the tradearrow layer and adding it back in.

                svg.select(".tradearrow").remove()

                svg.append("g")
                    .attr("class", "tradearrow")
                    .attr("clip-path", "url(#ohlcClip)")

                svg.select("g.tradearrow").datum( [   new array  ] ).call(tradearrow)