markmarkoh / datamaps

Customizable SVG map visualizations for the web in a single Javascript file using D3.js
http://datamaps.github.io
MIT License
3.78k stars 1.01k forks source link

Arc and bubble elements are not being removed #205

Closed BrianMitchL closed 8 years ago

BrianMitchL commented 9 years ago

I'm running a ~10,000 object JSON file through datamaps with arcs and bubbles. I'm setting map.arcs() and map.bubbles() to be a single new object every time in a loop. Every so often, usually a couple thousand into the loop I start seeing tons of console errors where the radius on an arc is something like 2.89679870547e-35. There are also arcs with their opacity set to similar values. This also alerted me to the fact that there are now thousands of and elements in my SVG that dramatically reduce performance, that aren't being removed from the DOM after the transition should be complete.

Performance is incredible and elements get removed if I change the following:

arcs.exit()
      .transition()
      .style('opacity', 0)
      .remove();

// ... 

bubbles.exit()
      .transition()
        .delay(options.exitDelay)
        .attr("r", 0)
        .remove();

to just be this:

arcs.exit().remove();

// ...

bubbles.exit().remove();

It would seem that the transition never quite moves the arc opacity and bubble radius to 0, so the element is never removed. I would like to continue to use transitions for exiting, as it really makes my visualization look much more fluid.

I'll try to find a solution, but thought it'd be good to post here in case someone has encountered this before. I can post code or anything else but the dataset if needed.

BrianMitchL commented 9 years ago

This may be related: d3 transition.remove https://github.com/mbostock/d3/wiki/Transitions#remove

adampound commented 8 years ago

Did you ever find a workaround? I'm having same issues

magic890 commented 8 years ago

It seems that transition break the behaviour once the user call, at least, two map.arc() subsequently:

// Draw arcs first time...
// Remove all arcs
map.arc([]);
// Re-draw arcs updated...
map.arc([
  { /* your arc obj 1 */ },
  { /* your arc obj 2 */ }
]);

In this case, if I'm using the version with transition on exit I'm still experiencing weird behaviours, however if I just skip to call map.arc([]) everything works fine.

It's happening only with 21 arcs and a couple of states colored.

@markmarkoh we need to figure out how to solve this thing.

I can confirm that using only

arcs.exit().remove();

// ...

bubbles.exit().remove();

is a possible solution.