javascript - d3.js チャートをズームし、データをより細かくリロードする方法 (AJAX)

Question

グラフをズームすると、一部のデータを新しいデータ ブロック (AJAX クエリ) に置き換える必要があります。

しかし、古いポイントと更新ラインパスなしで元のデータとマージするのに問題があります

JSFiddle の Zoom チャートを参照してください。

// Replace or add part of data
function zoom(g) {
   var data2add=[      // get new data by ajax query
      {"date":"2013-05-02T20:00","speed":0.878,"angle":269,"x":-0.725,"y":-0.018},
      ...
   ];
   console.log("data", data, "data2add", data2add);

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)
                  };
              });

 data = data.filter(function(element, index, array){
                    return (element.date<data2add[0].date || element.date > data2add[data2add.length-1].date);
                })
             .sort(function (a, b) {
                  return a.date - b.date;
                })
             .concat(data2add);       console.log("newData", data);


   d3.selectAll("path.line").data(data).enter();

   g.selectAll('circle').data(data).enter().append("circle")
     .attr("class", "dot");
   g.updateCurve()
    .drawAxis ();
}