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

Question

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

但我无法与没有旧点和更新行路径

的原始数据合并

见Zoom chart on JSFiddle。

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

Answer 1

问题在于您使用了.concat()。它合并数组而不取出任何点。相反，您应该做什么取决于您要对数据做什么。如果你想摆脱所有旧点，你可以用data2add覆盖data。

如果您想添加新数据，然后保留一定范围的旧数据，您可以在旧数组上使用.filter().concat()。只需创建一个过滤函数来检查元素是否在您的范围内并且不等于另一个数组中的任何内容。如下所示：

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

Answer 2

用于缩放和更新折线图，包含缩放数据exemple here：

1. 过滤旧数据不包括重复区域
2. 将过滤后的数据与缩放数据相结合
3. 排序新的数据数组 dy 日期
4. 重建点系列
5. 重绘曲线点和轴，但曲线需要像this.select("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 ();
}