d3 line transition

Question

A line chart displays a value over a given period of time (eg the last 2 days), one value per day. Users can change this time horizon (to eg the last four days).

Problem: the line transitions are really ugly. I figure the problem is the change in data:

state 1:      =>   state 2:
days     value     days      value
--------------     ---------------
today-2    5       today-4     3
today-1    8       today-3     9
                   today-2     5
                   today-1     8

In above case, for example, the former first data point with a value of 5 now transitions to the value of 3 and is shifted left to today-4 on the x-axis. What I would like to have is that 5 and 8 shifted to the right and remained at their values of 5 and 8, while the two new data points enter the stage from 0. Hope you can imagine what I mean.. if not have a look at this image that shows the current state of tragedy ( transition from 1 week => 4 weeks ):

Now, I know that when attaching the new data, a key can be assigned ( eg in this example, the key would be the date of the value) and I've got that working for circles (that are hidden in this chart and only visible when you mouse-over a value). These circles transition perfectly. Unfortunatly, I could not get this working for the lines here because of the way I structured my charts, I guess:

• each chart is built by an "init_chartX" function that initializes an "empty" chart (eg append a path for line)
• each chart is updated by an "update_chartX" function.

So in the init function, I set up the line:

// Add paths for line1 and line2
svg.append("g")
    .append("path")
    .attr("class", "line1");

And when I try to add the data with key in the update function..

svg.selectAll(".line1").data(data, function (d) { return formatDate(d.date); })

..the result is an exception because "d" is not defined. I assume this is because of the setup of a ".line1" element in the init function, it works just fine when used on circles that are not setup in the init function:

var dots1 = svg.selectAll(".circle1").data(data, function (d) { return formatDate(d.date); });

dots1.enter().insert("circle")
    .attr("class", "circle1");

The circles are not setup in the initfunction, they are just added on the fly. For the line on the other hand, I could not figure out how to get this done.

The answer to my question could be a link or some usefull tip ..I've seen the Path Transition pages of Mike Bostock already, also the general update pattern tutorials.. maybe I've been blind there. Thanks for any help!

Answer 1

Wow, finally found this . Alright, no key-binding lines. That will make smooth transitions for changing data with different length a bit harder but I'm glad I finally know why I kept getting an error ..

EDIT I found a solution: reverse the data before attaching it to the lines. So my example from above becomes:

state 1:      =>   state 2:
days     value     days      value
--------------     ---------------
today-1    8       today-1     8
today-2    5       today-2     5
                   today-3     9
                   today-4     3

and the transition works as supposed.. So easy, stupid me I didnt figure that out earlier. (the x-axis is not effected by that, it is still growing in time to the right)