javascript - d3JS: Transitions between valuelines of different points counts -

there have been similar questions before, have not found altogether clear answer this:

say have basic line graph composed of valuelinea 20 vertices.

i want transition line valuelineb 256 vertices.

the x domain remains same, y domain. assume valuelinea , valuelineb evenly distributed across x domain (time).

how transition occur between valuelinea , valuelineb such there no horizontal animation?

the code below transition between valuelinea , valuelineb, transitions squeezes valuelinea first 20 vertices of valuelineb.

 var trends=svg.append("path")               .attr("class", "line")         .attr("d", valuelinea(dataa));   trends         .transition()         .duration(3200)         .attr("d", valuelineb(datab))     ; 

i've found few posts similar (here , here), it's still not entirely clear me how perform seems basic operation.

there isn't easy solution, i'm afraid. here pointers on how go it:

for background: default transition finds numbers in string created new valueline function, , matches them numbers in "d" attribute string attached path element. numbers have match transitioned, points @ end of line tacked on.

you can write custom transition function have more control (look "d3 custom tween" examples), still leaves problem of how figure out points transition , insert in between -- , where insert new points.

in this answer created function interpolate values new points might want at. note in question number of data points wasn't changing (some going undefined defined). meant first half of problem -- matching old , new data points -- easy.

as solution wonky transitions, proposed breaking path individual line segments add each 1 in in place. solve matching problem too, since use data-join key function matching (if want check out code used internally that, it's @ lines 32 64 of data.js).

the many-lines approach might solution adapt. otherwise, if want stick using single <path> element linegraph (which has definite performance benefits if you've got thousands of data points, you're going need create path start of transition has same number of points final line.

here's plan of attack:

1. create transition data array includes data point every x value in new data array (i'm assuming old x-values included in larger dataset, if not gets trickier).

2. for each x-value, set y-value value old data if exists, or interpolated value otherwise.

3. update path's "d" value without transition line based on new data array. if did right shouldn't has changed, because new data points on lines between old data points.

4. now, create transition line new data; transition smooth because every new point has matching starting point.

as said above, within custom "tween" function, that's adding complication.