Question

I’m writing a dual layer time axis in d3. The first layer is a normal tick by tick axe, like the one built in. The second layer has ‘larger scale’ contextual dates, like years.

For example it could look like this

|  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |
2008    2009                  2010

After dragging it a bit it will look like this

 |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |
 2009                       2010              2011

What I want to do is having the labels animate to their new positions, but only if they have the same label. So here 2009 and 2010 would slide.

The problem is that d3 may assign the new 2009 label to the previous 2008 one, hence destroying the effect. Is this possible to avoid?

Answer 1

It’s hard to say without seeing more code, but it sounds like you need the key argument of the .data() operator. This allows you to join data to elements with a key function, which might be based on an existing element and/or its existing data. There’s a good explanation of how this works in the “Object Constancy” section of this bar chart tutorial.