3

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

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

请参阅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 ();
}
4

2 回答 2

3

用于缩放和更新折线图，此处包含缩放数据示例：

  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 ();
}
于 2013-08-02T06:57:44.443 回答
3

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

如果要添加新数据，然后保留一定范围的旧数据，可以.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;
}
于 2013-08-01T14:11:34.800 回答