javascript - D3.js enter transition for path not working -

i using d3 create line graph visualization bunch of data. data line comes array of objects, , use function translate data svg path can displayed:

this.line = d3.svg.line()     .interpolate('linear')     // .x(function(d,i) {return x(d['date']);})     .x(function (d,i) {return x(i);})     .y(function (d,i) {return y(d[this.key]) - this.yoffset;}); 

however, if leave data single array of objects (and set data point path), not able use enter , exit transitions add/remove segments composing line if data set changes size. so, solve issue, use function split array of points 2d array: array of arrays of length 2 each contain start , end point 1 particular segment of line, , use array data path, each segment on screen bound separately own 2-element array.

when call setdata , enter, path draws should. however, when update data update function (in case transitioning longer data set), path goes through appropriate update , exit transitions, shows key function supplied when binding data working expected. when call enter again, doesn't draw 1 segment needs added -- instead, erases existing path, , redraws whole line, time including new segment.

is there i'm missing here? how animate drawing of new segment, , not erase existing line segments?

all relevant code below -- feel free comment if need clarify more:

thanks in advance!

this.line = d3.svg.line()     .interpolate('linear')     .x(function (d,i) {return x(d['date']);})     .y(function (d,i) {return y(d[this.key]) - this.yoffset;});  this.pathenterdata = function(selection) {     this.path = selection.enter().append('path')         .attr('class','segment')         .attr('d',function(d, i) {return mthis.line(d);})         .style('stroke', mthis.pathcolor)         .style('stroke-width',2)         .style('fill','none'); };  this.pathentertransition = function(selection) {        return selection         .attr("stroke-dasharray", function(d) { var totlength = d3.select(this).node().gettotallength();                                                     return totlength + " " + totlength; })         .attr("stroke-dashoffset", function(d) { var totlength = d3.select(this).node().gettotallength();                                                     return totlength; })         .transition()             .delay(function(d,i) { return segmentduration*i; })             .duration(segmentduration)             .ease("linear")             .attr('stroke-dashoffset',0); };  this.enterdata = function() {     this.path.call(this.pathenterdata); };  this.entertransition = function() {     this.path.call(this.pathentertransition); };  this.enter = function() {      this.enterdata();     this.entertransition();                   };  this.exittransition = function() {     this.path.exit().transition()         .duration(exittransitionduration)         .style("stroke-opacity", 0.0)         .style("fill-opacity", 0.0)         .remove(); };  this.update = function(newdata) {     this.setdata(newdata);     this.exittransition();     this.updatetransition();     settimeout(function() {mthis.enter();},updatetransitionduration); };  this.updatetransition = function() {     this.bubblecircles.transition()         .duration(updatetransitionduration)         .attr("cx", function (d, i) { return x(d['date']); })         .call(mthis.setcircley);     this.bubbletext.transition()         .duration(updatetransitionduration)         .attr("x", function (d, i) { return x(d['date']) - (13.0/16)*bubblenumbersize; })         .call(mthis.settexty); };  this.setdata = function(points) {     var splitpoints = new array(points.length-1);     for(var i=0; i<points.length-1; i++) {         splitpoints[i] = [points[i],points[i+1]];//{'start':points[i],'end':points[i+1]};     }     this.path = this.path.data(splitpoints,function(d,i){return d[1]['date']}); };