Issue in rendering circles in javascript -

i trying make tooltip like: http://jsfiddle.net/6cj5c/10/ graph , result on realtime graph: http://jsfiddle.net/qbdgb/52/ wondering why there gap between circles , graph , why @ beginning there vertical line of circles? when starts circles close curve suddendly start jump , down !! want circles move smooothly , stick on surface of curve. think problem not moving "path1" , not recognize circles , thats why moving separetly or maybe value of tooltipis different of value of curve not overlap!. how data generated ( value , time) , tooltip:

var data1 = initialise();   var data1s = data1;   function initialise() {   var arr = [];  (var = 0; < n; i++) {      var obj = {  time: date.now(),  value: math.floor(math.random() * 90)   };      arr.push(obj);  }  return arr; }   // push new element on given array function updatedata(a) {  var obj = {  time: date.now(),  value: math.floor(math.random() * 90)   };  a.push(obj);    }    var formattime = d3.time.format("%h:%m:%s");    //tooltip    var div = d3.select("body").append("div")    .attr("class", "tooltip")     .style("opacity", 0);     var bluecircles = svg.selectall("dot")     .data(data1s)     .enter().append("circle")         .attr("r", 3)         .attr("cx", function(d) { return x(d.time); })         .attr("cy", function(d) { return y(d.value); })         .style("fill", "white")         .style("stroke", "red")         .style("stroke-width", "2px")         .on("mousemove", function(d ,i) {             div.transition()                 .duration(650)                 .style("opacity", .9);             div.html(formattime(new date(d.time)) + "<br/>" + d.value)                 .style("left", (d3.event.pagex) + "px")                 .style("top", (d3.event.pagey - 28) + "px");         })         .on("mouseout", function(d ,i ) {             div.transition()                 .duration(650)                 .style("opacity", 0);         });          bluecircles.data(data1s)         .transition()         .duration(650)         .attr("cx", function(d) { return x(d.time); })         .attr("cy", function(d) { return y(d.value); }); 

please kindly tell me opinions since need :( said maybe should add "mouseover , mouse move functions" "path" make recognize tooltip. following. nor sure :(

 var path1 = svg.append("g")       .attr("clip-path", "url(#clip)")       .append("path")       .data([data1])       .attr("class", "line1")        .on("mouseover", mouseover)       .on("mousemove", mousemove)       .on("mouseout", mouseout); 

i think problem lies in interpolation of paths. set interpolation between points on var area "basis", found b-spline interpolation. means area drawn does not go through points in dataset, shown in example:

the path points move over, though, straight lines between points in dataset. updated , changed interpolation basic linear, demonstrate work way. set ease() movement linear, makes less 'jumpy'. http://jsfiddle.net/qbdgb/53/