knots in linechart transition

[Fil]

In this example I'm adding data coming from a papaparse stream and the transition makes these funky knots.

[Luiz-N]

It looks like the data being added is out of order (in the past) then later being sorted.. that's what causes the line to go backwards.

[gordonwoodhull]

I'm having trouble viewing your GIF (it only runs once, and the effect is subtle). Does the problem look like one of the problems you can see in this testing page?

http://dc-js.github.io/dc.js/transitions/bar-transitions.html

If so, (or if you can repro similar problems in the area chart on the main example page) this is an instance of #507. And this is the one regression blocking the release of 2.0. (You could also try 1.7.5 to verify it works there, if you aren't using later features.)

[Fil]

Indeed the moment it makes a knot seems to be when there's new data classes inserted in the line, resulting in a general mix-up of the control points.

In my example the new data are the years 1954-1957 or so (beginning of the dimension), and the visual problem disappears if I reverse-sort the data in lineDraw():
return safeD(line(d.values.sort(function(a,b) { return d3.descending(a.x, b.x)})));

Hardly a generic solution, but it's really difficult to interpolate lines that don't span the same number of vertices (they are interpolated as strings not as sets of dots where each would be interpolated independently).

As I understand it, this is similar to #507, but a bit different. In #507 the reason is addition/removal of new elements in the SVG— the elements that get removed don't transition to "out of screen", they only get one of their coordinates to transition); here it's the addition of new control points in the same path that mixes things up when transitioning the path[d] value (see https://bost.ocks.org/mike/path/ ).

Hope this makes sense. (I'm sorry I wasn't able to make it work with dc 1.7.3 to confirm.)

[gordonwoodhull]

I think I get it. Yes I think this is another manifestation of the same problem, or at least should be solved by the same solution. However I'll keep this open to verify once that solution is in place.

What I think will work is:

• join the data using the X coordinates as keys (currently it's joined by index, the default)
• always make sure the full X domain including the starting and ending domain, is part of what's drawn

Incidentally, I glean from your description of the problem that this issue would probably also be present in 1.7, since it also joined by index.