Javascript 如何缩放d3.js图表并以更大的粒度重新加载数据（在AJAX中）

当我缩放图表时，我需要用一个新的数据块（AJAX查询）替换一些数据

但我无法在没有旧点和更新线路径的情况下与原始数据合并

看

//替换或添加部分数据
功能缩放（g）{
var data2add=[//通过ajax查询获取新数据
{“日期”：“2013-05-02T20:00”，“速度”：0.878，“角度”：269，“x”：-0.725，“y”：-0.018}，
...
];
日志（“数据”，数据，“数据添加”，数据添加）；
data2add=data2add.map（函数（d，i）{
返回{
日期：平均日期调用（数据，d，i），
速度：速度呼叫（数据，d，i），
角度：角度调用（数据，d，i），
xSpeed:xSpeed.call（data，d，i），
ySpeed:ySpeed.call（数据，d，i）
};
});
data=data.filter（函数（元素、索引、数组）{
返回（element.date data2add[data2add.length-1].date）；
})
.排序（功能（a、b）{
返回a.日期-b.日期；
})
.concat（data2add）；console.log（“newData”，data）；
d3.选择All（“path.line”）.data（data.enter（）；
g、 选择全部（'circle'）。数据（data）。输入（）。追加（“circle”）
.attr（“类”、“点”）；
g、 updateCurve（）
.drawAxis（）；
}

问题在于使用

.concat（）

。它合并了阵列，而不需要指出任何点。相反，您应该做什么取决于您试图对数据做什么。如果您想删除所有旧的点，只需使用

data2add

覆盖

data

如果要添加新数据，然后保留一定范围的旧数据，可以在

.concat（）

之前对旧数组使用

.filter（）

。只需创建一个过滤函数，检查元素是否既在您的范围内，又不等于其他数组中的任何元素。这将类似于以下内容：

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

function filterFunction（值，i，此数组）{
//检查点是否在范围内
if（值minRange）{
//请注意，您可能需要根据“相等”的程度进行更改
//您的元素是。您还可以遍历并检查日期，例如
//例如。
返回值（newDataArray.indexOf（value）>-1？0:1）
}
返回0；
}

用于缩放和更新包含缩放数据的折线图：

筛选旧数据以查找不包含重复区域

concat过滤数据与缩放数据

按日期对数据的新数组排序

重建网点系列

重新绘制曲线点和轴，但曲线需要像这样绘制。选择（“path.line”）.attr（“d”，line（data））而不是

this.select（“path.line”）.attr（“d”，line）

用于绘制和重画线和点的属性

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

用于绘制和重新绘制轴

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

用于缩放和替换部分数据

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

功能缩放（g）{
var data2add=[
{“日期”：“2013-05-02T20:00”，“速度”：0.878，“角度”：269，“x”：-0.725，“y”：-0.018}，
...
];
data2add=data2add.map（函数（d，i）{
返回{
日期：平均日期调用（数据，d，i），
速度：速度呼叫（数据，d，i），
角度：角度调用（数据，d，i），
xSpeed:xSpeed.call（data，d，i），
ySpeed:ySpeed.call（数据，d，i）
};
});
mergedata=data.filter（函数（元素、索引、数组）{
返回（element.datedata2add[data2add.length-1].date）；
})
.concat（data2add）
.排序（功能（a、b）{
返回a.date-b.date；
});
//.sortBy（函数（）{return this.date}）；//http://phrogz.net/JS/Array.prototype.sortBy.js
var newDots=g.selectAll（'圆'）
//定义新的[数据]
.data（合并数据，函数（d）{返回d.date；}）；
newDots.exit（）.remove（）；//exit（）内容不推荐使用的点，将其删除
newDots.enter（）.append（“circle”）//enter（）为新点添加内容，绘制它
.attr（“类”、“点”）；
g、 updateCurve（）
.drawAxis（）；
}

可以进行过滤，但您有没有用新值更新折线图的想法？我建议使用日期作为数据键，并使用标准的d3进入/退出/更新模式来移动内容。我通常使用刻度设置cx、cy等，然后转换到新位置。如果我已经加载了所有数据。是否有一种简单的方法，在查看器缩放之前，只显示减少的数据样本。更具体地说，一次只能智能地显示X个数据点。问题是，当我绘制所有数据点时，图形变得没有响应。只是一个提示，这是错误的，因为线在跳跃。

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