Memory leak from repeatedly applying d3 transition

Question

I have an SVG map and an interval that polls for data changes and updates the colors on the map accordingly. That all works fine unless I use a transition to fade to the new color. Then the tab slowly eats up more and more memory until it crashes.

I've made a simplified example that shows the same behavior:

var size = 500;
var num = 25;
var boxSize = size / num;

function color(d) {
    return '#' + Math.random().toString(16).slice(2,8);
}

var svg = d3.select('body')
    .append("svg")
    .attr("width", size)
    .attr("height", size);

var squares = svg.selectAll(".square")
    .data(d3.range(num * num))
  .enter().append("rect")
    .attr("class", "square")
    .attr("width", boxSize)
    .attr("height", boxSize)
    .attr("x", function (d) { return boxSize * (d % num);})
    .attr("y", function (d) { return boxSize * Math.floor(d / num); })
    .style("fill", color);

function shuffleColors() {
    squares.interrupt().transition().duration(500).style("fill", color);
    timer = setTimeout(shuffleColors, 1000);
}

var timer = setTimeout(shuffleColors, 1000);

https://plnkr.co/edit/p71QmO

I've tried it in Chromium (49) and Firefox (45) on Linux. It seems to blow up faster on the former, but it's a problem on both. In neither does it show up in the memory profiler, but about:memory shows the tab growing.

My understanding from the documentation is that adding a transition to a selection replaces any previous transition by the same name (including for empty name), but my hypothesis is that the functions created to implement the transition aren't actually getting thrown out. But I haven't managed to get at them to confirm that or work around the issue.

So, a two-part question:

1. Is that a proper use of d3 transitions, or is there a more correct way to do what I'm going for?
2. If I'm using the transition properly, how do I get it to stop leaking memory?

EDIT:

1. Per the comment from Blindman67, I changed it to use setTimeout and be slightly smaller. The original that I'm trying to simulate is smaller and slower, but it takes hours to grow definitively bigger, so I was trying to speed that up. This version still appears to be growing, at least for me on Chromium.
2. I got as far as observing that d3_selectionPrototype.transition makes a new d3_transition with an incrementing ID every time, but that's fine if the old one gets garbage-collected. And I still can't point to whether or why it's being retained.

Answer 1

I'm fairly certain it has to do this piece right here:

function shuffleColors() {
    squares.interrupt().transition().duration(500).style("fill", color);
    timer = setTimeout(shuffleColors, 1000);
}

var timer = setTimeout(shuffleColors, 1000);

Every time you call the function shuffleColors(), it calls itself again, essentially creating a recursion loop without a base case. The reason it doesn't blow up immediately is that every call of the function it delayed 1000ms, however, I think it takes longer for the squares.interrupt().transition().duration(500).style("fill", color); to finish than it is for setTimeout() to be called. So even though you call it every 1000ms, it could be stacking up in some fashion since some color changes may require more time to process.

Though it technically shouldn't do that, knowing how asynchronous JavaScript is, it may have a role. I would suggest doing this instead and reporting back the results:

function shuffleColors() {
    squares.interrupt().transition().duration(500).style("fill", color);
}

var timer = setInterval(shuffleColors, 1000);

You can also call clearInterval(timer) if you need to at any point. setInterval() was created for the very reason you implemented setTimeout().

Edit: This may not work completely as you may still have you wait for the color change to finish, however, it would at least be a cleaner approach. You may be able to implement some sort of wait() function to wait for the color change to complete.

Though vector (SVG) images are lightweight, the amount of processing it requires to constantly change colors or something like that is enormous compared to decoding a JPEG image.

You might find better results if you make the original image size much smaller and then expand it to your resolution. You could make a 100x100 canvas SVG and expand it to 2000x2000 or something, so it doesn't have to draw such a large image.