-
Notifications
You must be signed in to change notification settings - Fork 89
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Animation upon Data Update #80
Comments
Before anything else, I should say how much I like this very configurable and flexible sunburst-chart ! I'm still experimenting and learning, but I really like it ! I am just following up on this old question (not an issue really), because I'd like to achieve the same effect. Can the same thing be done using the current API ? or does that require changes to the component ? The maths involved don't really scare me - I do a lot of (much more complicated) maths everyday... However, I really don't know anything about javascript and I don't have the faintest idea about the tools needed to develop this or to debug this.... A simple example would be awsome ! |
@DavidC-75 if you re-instantiate the chart (as opposed to just modifying the data array input to it), it should trigger the initial build-in animation since it's in fact a completely new chart. |
Well, the idea sounds simple enough.... As I said I am a complete novice when it comes to javascript and d3. I really don't know what I'm doing.... so very possibly I made a beginner's mistake, but when re-instantiating the chart after modifying the data array, I just get new charts and new charts (as reported by the OP) as the previous instances do not get deleted.... See below. Any suggestions ? I don't want to be asking too much, but a simple example would really be great ! |
Assuming you have a reference to the DOM element the chart is associated with, you can force full re-initialization of the chart by emptying the DOM element and feed it once again to the component. Something like: // initially, just once
const myChart = Sunburst();
myChart(myElement);
// ...
// later, to re-init
myElement.innerHTML = '';
myChart(myElement); |
Yes that works nicely, thanks a lot !! |
Is your feature request related to a problem? Please describe.
When updating the chart data, the chart doesn't perform the animation that it does when it's first rendered. It would be really nice to have this effect each time the data is changed (ideally as a user selects options from a drop-down menu or the like).
Describe the solution you'd like
Ability to "re-draw" the chart upon data update, or have the chart perform the initial expansion animation when the data is changed.
Describe alternatives you've considered
I've attempted resetting the ref's in React, but the Chart just seems to keep appending new charts to the DOM.
Additional context
N/A
The text was updated successfully, but these errors were encountered: