animation - d3.js Saved Transition Error -
i working in d3.js, making chart object. chart has update()
method refreshes data, using transition animate change. because have several different objects animate within 1 chart, wanted store transition member of chart's prototype, use transition.each
wrapped around transitions allow transitions inherit settings of outer one. using settimeout
schedule updates chart on time, becomes animation.
the chart supposed show distribution of means of skew population, more , more means taken. here's working version, transition not saved member of chart prototype: http://jsfiddle.net/pmwxcpz7/
now, try modify above code store transition during constructor of chart. when fetch saved transition object , call transition.each()
in chart's update
method, works first several hundred calls, stops working. here's above code, creation of transition moved constructor: http://jsfiddle.net/whtfny15/1/
when run second version of code, chart stops animating part of way through, , console shows many errors saying
typeerror: t.__transition__[e] undefined (d3.v3.min.js:5)
i have reduced code minimum needed generate error here: http://jsfiddle.net/bw1e2vlo/1/ (note error shows in console, script doesn't produce visual output.)
when run code (in firefox), watching console, 200 errors, of say
typeerror: t.__transition__[e] undefined (d3.v3.min.js:5)
i'm not sure what's going on. able save transition object chart's prototype, can reuse delay , duration settings future animations.
thanks help!
it's not idea store d3 transitions because stateful -- happens when operate on them depends on whether scheduled, running, or finished. if finished can't in fact lot them @ all, you've discovered. in general, should ever manipulate transition when creating it.
the d3 way multiple transitions re-select elements operate on , initialise new transition. can store parameters (delay , duration) in separate variables if want reuse them. if you're using custom function transition itself, can save separately , "assign" transition using .attrtween()
.
Comments
Post a Comment