Chart refresh issues

[jscheid]

Hi, could you take a look here: https://jsfiddle.net/julians37/0jhhwm0c/

Mouse over the items in the scatter plot and you should see that everything works fine. Now press the button and try again. You should see that the horizontal and vertical lines are not cleaned up properly.

I've tried debugging this and had some success when clearing out the svg element when the chart is re-instantiated, like so:

    if (!this.chart || this.rendering) {
      d3.select(this.refs.svg).select("svg > *").remove();
      this.chart = nv.models[this.props.type]();
    }

This seems to fix the refresh issue, however other issues appear: there seems to be some offset in mouse coordinates and also bogus transitions. And I don't really understand why rendering would be true at this point, perhaps that's the problem?

[topicus]

@jscheid Seems like a legit bug. I'll try to fix it during this weekend.

Rendering is a flag to check if chart finished animation that allows to remove the chart even when chart is in the middle of an animation.

In other words, if this.chart is undefined because the chart were not created yet or the chart is in the middle of an animation. If any of those conditions happen then we should clean the canvas and create a new chart object otherwise chart object is reused.

This rendering flag prevent errors when the render (state change) method is called before a render_end event happen. There are some callbacks which remain tied with the original DOM elements (elements before render) then when the render_end event is triggered it raises an error trying to perform some operations over the former DOM elements.

[jscheid]

Thanks for the explanation, makes more sense now.