Q:

optimize tween() transition in d3.js

I have a set of items:
[
  { label: 'item1', color: 'yellow' },
  { label: 'item2', color: 'red' },
  { label: 'item3', color: 'blue' },
  { label: 'item4', color: 'green' }
]

There's a main transition which moves all items from left to right.
Inside this main transition, I want to apply individual transitions to each item (this transition goes up and down).
This last transition is a bit special because each item is composed of a text and a circle and these two parts move independently from each other.
Here's a jsfiddle showing you an example: http://jsbin.com/juyoyuzuta/1/edit?js,output
(sorry if the example is a bit ugly, but you can get the idea)
When I profile this code in my browser it's seems like the browser is doing a lot of painting/rendering.
I'm wondering if there's some optimizations I can do to do less paintings/rendering. And more generally if there's a better way to do it.

A:

I think you're going to be getting into micro-optimization land after this point. You're doing it the way I would tackle the problem, here are some things you could try:

You could attempt to modify the position of the circles / labels directly rather than applying a transform. My gut feeling is if you're getting any hardware acceleration that you're probably going to lose it doing this (CSS transforms are a pretty standard thing, modify cx of a circle is not).  
You could reduce the amount of movement, those circles look like they're just buzzing with energy, maybe slow the thing down and move the circles up/down a bit less frequently. Aim for a smoother transition and I don't think you'd lose anything.

But in essence, you're doing a very paint heavy operation and not a lot else. So it's fully expected that profiling the code is going to point to a lot of rendering and DOM manipulation. You're basically doing this over a fairly tight loop.

