score:3

Accepted answer

The problem is with your use of .concat(). It merges the arrays without taking any points out. What you should do instead depends on what you're trying to do with the data. If you want to get rid of all of your old points, you can just overwrite data with data2add.

If you want to add your new data and then keep a certain range of your old data, you can use .filter() on your old array before .concat(). Just create a filtering function that checks to see if the element is both within your range and not equal to anything in the other array. This would look something like the following:

function filterFunction(value, i, thisArray){
    //Check to see if point is in range
    if(value < maxRange && value > minRange){

        //Note that you might have to change this depending on how 'equal' 
        //your elements are. You could also iterate through and check the dates, for
        //example.

        return (newDataArray.indexOf(value) > -1 ? 0 : 1)
    }

    return 0;
}

score:3

for zoom and update line chart with include zoom data exemple here:

  1. filter old data for not include duplicate area
  2. concat filtered data with zoom data
  3. Sort New array of data dy date
  4. rebuild serie of dot
  5. redraw curve dot and axis, but curve need draw like this.select("path.line").attr("d", line(data)); instead of this.select("path.line").attr("d", line);

for draw and redraw Attribute of line and Dots

 g.updateCurve = function(_){
    // Update the line path.
    this.select("path.line")
    .attr("d", line(_));

    // add each point
    this.selectAll('circle.dot')
    .attr("cx", function(d) {return xScale (d.date); })
    .attr("cy", function(d) {return yScale (d.ySpeed); })
    .attr("r", function(d) {return rScale (d.xSpeed)*2; });

    return this;
};

for draw and redraw axxis

g.drawAxis = function(){
    // Update the x-axis.
    g.select(".x.axis")
        .attr("transform", "translate(0," + xPos + ")")
        .call(xAxis);
    g.select(".y.axis")
        .attr("transform", "translate(0,0)")
        .call(yAxis);
    return this;
};

for zoom and replace part of data

function zoom(g) {
   var data2add=[
      {"date":"2013-05-02T20:00","speed":0.878,"angle":269,"x":-0.725,"y":-0.018},
      ...
  ];

  data2add = data2add.map(function(d, i) {
                  return {
                      date:meanDate.call(data, d, i),
                      Speed:Speed.call(data, d, i),
                      angle:angle.call(data, d, i),
                      xSpeed:xSpeed.call(data, d, i),
                      ySpeed:ySpeed.call(data, d, i)
                  };
              });

  mergedata = data.filter(function(element, index, array){
      return (element.date<data2add[0].date || element.date>data2add[data2add.length-1].date);
  })
  .concat(data2add)
  .sort(function (a, b) {
      return a.date-b.date;
  });
  // .sortBy( function(){ return this.date } ); // http://phrogz.net/JS/Array.prototype.sortBy.js

  var newDots = g.selectAll('circle')
                 // define new [data]
                 .data(mergedata, function(d) { return d.date; });
  newDots.exit().remove(); // exit() content the deprecated points, remove it
  newDots.enter().append("circle")// enter() content the new points, draw it
   .attr("class", "dot");

    g.updateCurve()
     .drawAxis ();
}

Related Query

More Query from same tag