Smoothly animate attribute changes to ~3000 Raphael objects at once

Question

UPDATED QUESTION I\'ve updated this to be a little more succinct..:

In this fiddle: http://jsfiddle.net/pX2Xb/4/ I have some raphael code that draws

Answer 1

I don't know why, but D3.js is more efficient when animating a large number of elements at once. You can make them both work seamlessly by creating a Raphael function that receives a set and returns the html objects you want to animate:

Raphael.st.nodes = function() {
  var elements = [];
  this.forEach(function (i) {
     elements.push(i.node);
  });
  return elements;
}

And then you let d3 take it from there

//circleholder is a Raphael set
elements = circleholder.nodes()
d3.selectAll(elements)
  .transition()
  .attr("fill", function(d,i){return colours[randomNum(14)]})
  .duration(ANIMATION_DELAY)

Here is the jsfiddle: http://jsfiddle.net/mFecs/

Answer 2

Did you write all the paths manually? I think is better if you put all the paths in an object. Then you can iterate the object and draw all the paths using, for example, for in. In that process you can give an internal ID to every path using element.id = 'name'. Once you have all the internal ID´s and the paths drawed, you can use the getById method: getById('pathId') If you are going to use Sets I recommend you to use Clousures, you can first declare the variables

var setName = Paper.Set()

and then push the paths in another loop

for (countie in Lousiana){
    setName.push(countie)
}

Then you have methods like Paper.forEach() if you want to apply some attributes to the elements. Or Set.FotEach(). Both take a callback function like argument, and then executes that function in each iteration.

If you want to share your code it wouldn´t be a problem for me to check it out and give my opinion on how to solve some of the situations. I´m also working with maps, I´m developing an Educative Video Game, if you want I can also share my code with you, there aren´t that much documentation about Raphael, so it would be useful for me to see how are you using it and maybe the same for you.

Bye!

Answer 3

As I'm not currently that familiar with Rapael.js, I'd just suggest, in a generic JavaScript manner, that you could maybe create an changeRaphaelPathAttributeEvent, that you'd emit each time you'd like to change the paths, with the attribute changes as arguments to said event. And then attach event handlers to each of the paths that would carry out the attribute change, if that's possible.

That way, you would get around the problem of having a loop access all the paths variables and change the attributes synchronously (which would directly affect the page's responsiveness while processing); the method would have a lower impact on the performance that the user experiences.

Note: This is just a solution to get around the immediate performance hit. Maybe there are other solutions available of minimizing the amount of objects needed to access, that you should also consider (and that I'm not capable of telling you, as I don't know Raphael that well).

Answer 4

To be honest, changing the attributes of 3000 items should be easy for any computer. Raphael uses a setInterval for each animated element. After the element's attribute is changed, the browser re-draws the entire page. This is 2999 un-necessary re-draws.

Here is what I would do: Instead of using the Raphael animation, use a loop to change each element. It is a little more complex, but it is faster. In addition, you can change the steps per second. If your animation is running too slow, just reduce the steps per second.

Here is an example: http://jsfiddle.net/dqJps/25/

Hope this helps.