重绘时动态缩放D3数据系列

Question

我正在绘制一条被更新的线路径，向它添加新的点。由于我不知道x轴的长度，这取决于进度持续的时间，所以我想按此缩放y数据。在这个示例中，我有两个不同的x轴标度的sampe图，所以我向displayGraph方法传递了一个xScale值，同时我想动态地计算这个值，以适应当前的data大小。

​

function displayGraph(id, data, name, xScale, width, height, interpolation, animate, updateDelay, transitionDelay) {

  var margin = {
      top: 10,
      right: 20,
      bottom: 30,
      left: 50
    },
    width = width - margin.left - margin.right,
    height = height - margin.top - margin.bottom
  var rangeX = xScale
  var svg = d3.select(id)
    .append("svg:svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  var graph = svg.append('g')
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

  var x = d3.scale.linear().domain([0, rangeX]).range([0, width]); // max(x) is 100
  var y = d3.scale.linear().domain([0, 1]).range([height, 0]); // max(y) is 1   
  var line = d3.svg.line()
    .x(function(d, i) {
      return x(i);
    })
    .y(function(d) {
      return y(d.value);
    })
    .interpolate(interpolation)

  var xAxis = d3.svg.axis().scale(x)
    .orient("bottom").ticks(10);
  var yAxis = d3.svg.axis().scale(y)
    .orient("left").ticks(10);

  var color = d3.scale.category10();
  graph.append("svg:path")
    .attr("d", line(data))
    .attr("class", "line")
    .style('stroke', function(d, i) {
      console.log(i, d);
      return color(Math.random());
    });

  graph.append("g") // Add the X Axis
    .attr('stroke', function(d) {
      return "steelblue"
    })
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis)
    .append("text")
    .attr("x", width)
    .attr("y", -20)
    .attr("dy", ".71em")
    .style("text-anchor", "end")
    .text(function(d) {
      return "progress"
    });

  graph.append("g") // Add the Y Axis
    .attr('stroke', function(d) {
      return "steelblue"
    })
    .attr("class", "y axis")
    .call(yAxis)
    .append("text")
    .attr("transform", "rotate(-90)")
    .attr("y", 4)
    .attr("dy", ".71em")
    .style("text-anchor", "end")
    .text(function(d) {
      return name
    });

  graph.append("text")
    .attr("x", width / 2)
    .attr("y", 0)
    .attr('stroke', "steelblue")
    .style("text-anchor", "middle")
    .text("Model " + name);

  graph.append("text")
    .attr("x", width)
    .attr("y", height + margin.bottom)
    .attr('stroke', "steelblue")
    .style("text-anchor", "middle")
    .text("progress");

  graph.append("text")
    .attr("transform", "rotate(-90)")
    .attr("y", 0 - margin.left)
    .attr("x", 0 - (height / 2))
    .attr("dy", "1em")
    .attr('stroke', "steelblue")
    .style("text-anchor", "middle")
    .text(name);

  function redrawWithAnimation() {
    //x.domain(d3.extent(data, function(d,i) { return i; }));
    x.domain([0, rangeX]); // max(x) is 100
    //x.domain([0, d3.max(data, function(d,i) { return i })]);
    y.domain([0, d3.max(data, function(d) {
      return d.value;
    })]);
    graph.selectAll("path")
      .data([data])
      .attr("transform", "translate(" + x(1) + ")")
      .attr("d", line)
      .transition()
      .ease("linear")
      .duration(transitionDelay)
      .attr("transform", "translate(" + x(0) + ")");

  }

  function redrawWithoutAnimation() {
    // static update without animation
    graph.selectAll("path")
      .data([data]) // set the new data
      .attr("d", line); // apply the new data values
  }
  setInterval(function() {
    if (animate) {
      redrawWithAnimation();
    } else {
      redrawWithoutAnimation();
    }
  }, updateDelay);
} //displayGraph
var data = {
  lr: [],
  loss: []
};
var dataIn = {
  "lr": [{
    "value": 0.099989,
    "name": "lr"
  }, {
    "value": 0.099989,
    "name": "lr"
  }, {
    "value": 0.099989,
    "name": "lr"
  }, {
    "value": 0.099989,
    "name": "lr"
  }, {
    "value": 0.099989,
    "name": "lr"
  }, {
    "value": 0.099989,
    "name": "lr"
  }, {
    "value": 0.099989,
    "name": "lr"
  }, {
    "value": 0.099989,
    "name": "lr"
  }, {
    "value": 0.099989,
    "name": "lr"
  }, {
    "value": 0.099989,
    "name": "lr"
  }, {
    "value": 0.099989,
    "name": "lr"
  }, {
    "value": 0.099989,
    "name": "lr"
  }, {
    "value": 0.099989,
    "name": "lr"
  }, {
    "value": 0.099989,
    "name": "lr"
  }, {
    "value": 0.089951,
    "name": "lr"
  }, {
    "value": 0.089951,
    "name": "lr"
  }, {
    "value": 0.089951,
    "name": "lr"
  }, {
    "value": 0.089951,
    "name": "lr"
  }, {
    "value": 0.089951,
    "name": "lr"
  }, {
    "value": 0.089951,
    "name": "lr"
  }, {
    "value": 0.089951,
    "name": "lr"
  }, {
    "value": 0.089951,
    "name": "lr"
  }, {
    "value": 0.089951,
    "name": "lr"
  }, {
    "value": 0.089951,
    "name": "lr"
  }, {
    "value": 0.089951,
    "name": "lr"
  }, {
    "value": 0.089951,
    "name": "lr"
  }, {
    "value": 0.089951,
    "name": "lr"
  }, {
    "value": 0.089951,
    "name": "lr"
  }, {
    "value": 0.089951,
    "name": "lr"
  }, {
    "value": 0.079985,
    "name": "lr"
  }, {
    "value": 0.079985,
    "name": "lr"
  }, {
    "value": 0.079985,
    "name": "lr"
  }, {
    "value": 0.079985,
    "name": "lr"
  }, {
    "value": 0.079985,
    "name": "lr"
  }, {
    "value": 0.079985,
    "name": "lr"
  }, {
    "value": 0.079985,
    "name": "lr"
  }, {
    "value": 0.079985,
    "name": "lr"
  }, {
    "value": 0.079985,
    "name": "lr"
  }, {
    "value": 0.079985,
    "name": "lr"
  }, {
    "value": 0.079985,
    "name": "lr"
  }, {
    "value": 0.079985,
    "name": "lr"
  }, {
    "value": 0.079985,
    "name": "lr"
  }, {
    "value": 0.079985,
    "name": "lr"
  }, {
    "value": 0.06995,
    "name": "lr"
  }, {
    "value": 0.06995,
    "name": "lr"
  }, {
    "value": 0.06995,
    "name": "lr"
  }, {
    "value": 0.06995,
    "name": "lr"
  }, {
    "value": 0.06995,
    "name": "lr"
  }, {
    "value": 0.06995,
    "name": "lr"
  }, {
    "value": 0.06995,
    "name": "lr"
  }, {
    "value": 0.06995,
    "name": "lr"
  }, {
    "value": 0.06995,
    "name": "lr"
  }, {
    "value": 0.06995,
    "name": "lr"
  }, {
    "value": 0.06995,
    "name": "lr"
  }, {
    "value": 0.06995,
    "name": "lr"
  }, {
    "value": 0.06995,
    "name": "lr"
  }, {
    "value": 0.06995,
    "name": "lr"
  }, {
    "value": 0.059958,
    "name": "lr"
  }, {
    "value": 0.059958,
    "name": "lr"
  }, {
    "value": 0.059958,
    "name": "lr"
  }, {
    "value": 0.059958,
    "name": "lr"
  }, {
    "value": 0.059958,
    "name": "lr"
  }, {
    "value": 0.059958,
    "name": "lr"
  }, {
    "value": 0.059958,
    "name": "lr"
  }, {
    "value": 0.059958,
    "name": "lr"
  }, {
    "value": 0.059958,
    "name": "lr"
  }, {
    "value": 0.059958,
    "name": "lr"
  }, {
    "value": 0.059958,
    "name": "lr"
  }, {
    "value": 0.059958,
    "name": "lr"
  }, {
    "value": 0.059958,
    "name": "lr"
  }, {
    "value": 0.059958,
    "name": "lr"
  }, {
    "value": 0.059958,
    "name": "lr"
  }, {
    "value": 0.059958,
    "name": "lr"
  }, {
    "value": 0.04995,
    "name": "lr"
  }, {
    "value": 0.04995,
    "name": "lr"
  }, {
    "value": 0.04995,
    "name": "lr"
  }, {
    "value": 0.04995,
    "name": "lr"
  }, {
    "value": 0.04995,
    "name": "lr"
  }, {
    "value": 0.04995,
    "name": "lr"
  }, {
    "value": 0.04995,
    "name": "lr"
  }, {
    "value": 0.04995,
    "name": "lr"
  }, {
    "value": 0.04995,
    "name": "lr"
  }, {
    "value": 0.04995,
    "name": "lr"
  }, {
    "value": 0.04995,
    "name": "lr"
  }, {
    "value": 0.04995,
    "name": "lr"
  }, {
    "value": 0.04995,
    "name": "lr"
  }, {
    "value": 0.039952,
    "name": "lr"
  }, {
    "value": 0.039952,
    "name": "lr"
  }, {
    "value": 0.039952,
    "name": "lr"
  }, {
    "value": 0.039952,
    "name": "lr"
  }, {
    "value": 0.039952,
    "name": "lr"
  }, {
    "value": 0.039952,
    "name": "lr"
  }, {
    "value": 0.039952,
    "name": "lr"
  }, {
    "value": 0.039952,
    "name": "lr"
  }, {
    "value": 0.039952,
    "name": "lr"
  }, {
    "value": 0.039952,
    "name": "lr"
  }, {
    "value": 0.039952,
    "name": "lr"
  }, {
    "value": 0.039952,
    "name": "lr"
  }, {
    "value": 0.039952,
    "name": "lr"
  }, {
    "value": 0.039952,
    "name": "lr"
  }, {
    "value": 0.039952,
    "name": "lr"
  }, {
    "value": 0.039952,
    "name": "lr"
  }, {
    "value": 0.029958,
    "name": "lr"
  }, {
    "value": 0.029958,
    "name": "lr"
  }, {
    "value": 0.029958,
    "name": "lr"
  }, {
    "value": 0.029958,
    "name": "lr"
  }, {
    "value": 0.029958,
    "name": "lr"
  }, {
    "value": 0.029958,
    "name": "lr"
  }, {
    "value": 0.029958,
    "name": "lr"
  }, {
    "value": 0.029958,
    "name": "lr"
  }, {
    "value": 0.029958,
    "name": "lr"
  }, {
    "value": 0.029958,
    "name": "lr"
  }, {
    "value": 0.029958,
    "name": "lr"
  }, {
    "value": 0.029958,
    "name": "lr"
  }, {
    "value": 0.019951,
    "name": "lr"
  }, {
    "value": 0.019951,
    "name": "lr"
  }, {
    "value": 0.019951,
    "name": "lr"
  }, {
    "value": 0.019951,
    "name": "lr"
  }, {
    "value": 0.019951,
    "name": "lr"
  }, {
    "value": 0.019951,
    "name": "lr"
  }, {
    "value": 0.019951,
    "name": "lr"
  }, {
    "value": 0.019951,
    "name": "lr"
  }, {
    "value": 0.019951,
    "name": "lr"
  }, {
    "value": 0.019951,
    "name": "lr"
  }, {
    "value": 0.019951,
    "name": "lr"
  }, {
    "value": 0.019951,
    "name": "lr"
  }, {
    "value": 0.019951,
    "name": "lr"
  }, {
    "value": 0.019951,
    "name": "lr"
  }, {
    "value": 0.019951,
    "name": "lr"
  }, {
    "value": 0.019951,
    "name": "lr"
  }, {
    "value": 0.009958,
    "name": "lr"
  }, {
    "value": 0.009958,
    "name": "lr"
  }, {
    "value": 0.009958,
    "name": "lr"
  }, {
    "value": 0.009958,
    "name": "lr"
  }, {
    "value": 0.009958,
    "name": "lr"
  }, {
    "value": 0.009958,
    "name": "lr"
  }, {
    "value": 0.009958,
    "name": "lr"
  }, {
    "value": 0.009958,
    "name": "lr"
  }, {
    "value": 0.009958,
    "name": "lr"
  }, {
    "value": 0.009958,
    "name": "lr"
  }, {
    "value": 0.009958,
    "name": "lr"
  }, {
    "value": 0.009958,
    "name": "lr"
  }, {
    "value": 0.000012,
    "name": "lr"
  }, {
    "value": 0.000012,
    "name": "lr"
  }, {
    "value": 0.000012,
    "name": "lr"
  }],
  "loss": [{
    "value": 4.045375,
    "name": "loss"
  }, {
    "value": 4.045375,
    "name": "loss"
  }, {
    "value": 4.045375,
    "name": "loss"
  }, {
    "value": 4.045375,
    "name": "loss"
  }, {
    "value": 4.045375,
    "name": "loss"
  }, {
    "value": 4.045375,
    "name": "loss"
  }, {
    "value": 4.045375,
    "name": "loss"
  }, {
    "value": 4.045375,
    "name": "loss"
  }, {
    "value": 4.045375,
    "name": "loss"
  }, {
    "value": 4.045375,
    "name": "loss"
  }, {
    "value": 4.045375,
    "name": "loss"
  }, {
    "value": 4.045375,
    "name": "loss"
  }, {
    "value": 4.045375,
    "name": "loss"
  }, {
    "value": 4.045375,
    "name": "loss"
  }, {
    "value": 1.31036,
    "name": "loss"
  }, {
    "value": 1.31036,
    "name": "loss"
  }, {
    "value": 1.31036,
    "name": "loss"
  }, {
    "value": 1.31036,
    "name": "loss"
  }, {
    "value": 1.31036,
    "name": "loss"
  }, {
    "value": 1.31036,
    "name": "loss"
  }, {
    "value": 1.31036,
    "name": "loss"
  }, {
    "value": 1.31036,
    "name": "loss"
  }, {
    "value": 1.31036,
    "name": "loss"
  }, {
    "value": 1.31036,
    "name": "loss"
  }, {
    "value": 1.31036,
    "name": "loss"
  }, {
    "value": 1.31036,
    "name": "loss"
  }, {
    "value": 1.31036,
    "name": "loss"
  }, {
    "value": 1.31036,
    "name": "loss"
  }, {
    "value": 1.31036,
    "name": "loss"
  }, {
    "value": 1.359995,
    "name": "loss"
  }, {
    "value": 1.359995,
    "name": "loss"
  }, {
    "value": 1.359995,
    "name": "loss"
  }, {
    "value": 1.359995,
    "name": "loss"
  }, {
    "value": 1.359995,
    "name": "loss"
  }, {
    "value": 1.359995,
    "name": "loss"
  }, {
    "value": 1.359995,
    "name": "loss"
  }, {
    "value": 1.359995,
    "name": "loss"
  }, {
    "value": 1.359995,
    "name": "loss"
  }, {
    "value": 1.359995,
    "name": "loss"
  }, {
    "value": 1.359995,
    "name": "loss"
  }, {
    "value": 1.359995,
    "name": "loss"
  }, {
    "value": 1.359995,
    "name": "loss"
  }, {
    "value": 1.359995,
    "name": "loss"
  }, {
    "value": 1.298786,
    "name": "loss"
  }, {
    "value": 1.298786,
    "name": "loss"
  }, {
    "value": 1.298786,
    "name": "loss"
  }, {
    "value": 1.298786,
    "name": "loss"
  }, {
    "value": 1.298786,
    "name": "loss"
  }, {
    "value": 1.298786,
    "name": "loss"
  }, {
    "value": 1.298786,
    "name": "loss"
  }, {
    "value": 1.298786,
    "name": "loss"
  }, {
    "value": 1.298786,
    "name": "loss"
  }, {
    "value": 1.298786,
    "name": "loss"
  }, {
    "value": 1.298786,
    "name": "loss"
  }, {
    "value": 1.298786,
    "name": "loss"
  }, {
    "value": 1.298786,
    "name": "loss"
  }, {
    "value": 1.298786,
    "name": "loss"
  }, {
    "value": 1.307065,
    "name": "loss"
  }, {
    "value": 1.307065,
    "name": "loss"
  }, {
    "value": 1.307065,
    "name": "loss"
  }, {
    "value": 1.307065,
    "name": "loss"
  }, {
    "value": 1.307065,
    "name": "loss"
  }, {
    "value": 1.307065,
    "name": "loss"
  }, {
    "value": 1.307065,
    "name": "loss"
  }, {
    "value": 1.307065,
    "name": "loss"
  }, {
    "value": 1.307065,
    "name": "loss"
  }, {
    "value": 1.307065,
    "name": "loss"
  }, {
    "value": 1.307065,
    "name": "loss"
  }, {
    "value": 1.307065,
    "name": "loss"
  }, {
    "value": 1.307065,
    "name": "loss"
  }, {
    "value": 1.307065,
    "name": "loss"
  }, {
    "value": 1.307065,
    "name": "loss"
  }, {
    "value": 1.307065,
    "name": "loss"
  }, {
    "value": 1.269755,
    "name": "loss"
  }, {
    "value": 1.269755,
    "name": "loss"
  }, {
    "value": 1.269755,
    "name": "loss"
  }, {
    "value": 1.269755,
    "name": "loss"
  }, {
    "value": 1.269755,
    "name": "loss"
  }, {
    "value": 1.269755,
    "name": "loss"
  }, {
    "value": 1.269755,
    "name": "loss"
  }, {
    "value": 1.269755,
    "name": "loss"
  }, {
    "value": 1.269755,
    "name": "loss"
  }, {
    "value": 1.269755,
    "name": "loss"
  }, {
    "value": 1.269755,
    "name": "loss"
  }, {
    "value": 1.269755,
    "name": "loss"
  }, {
    "value": 1.269755,
    "name": "loss"
  }, {
    "value": 1.269757,
    "name": "loss"
  }, {
    "value": 1.269757,
    "name": "loss"
  }, {
    "value": 1.269757,
    "name": "loss"
  }, {
    "value": 1.269757,
    "name": "loss"
  }, {
    "value": 1.269757,
    "name": "loss"
  }, {
    "value": 1.269757,
    "name": "loss"
  }, {
    "value": 1.269757,
    "name": "loss"
  }, {
    "value": 1.269757,
    "name": "loss"
  }, {
    "value": 1.269757,
    "name": "loss"
  }, {
    "value": 1.269757,
    "name": "loss"
  }, {
    "value": 1.269757,
    "name": "loss"
  }, {
    "value": 1.269757,
    "name": "loss"
  }, {
    "value": 1.269757,
    "name": "loss"
  }, {
    "value": 1.269757,
    "name": "loss"
  }, {
    "value": 1.269757,
    "name": "loss"
  }, {
    "value": 1.269757,
    "name": "loss"
  }, {
    "value": 1.238867,
    "name": "loss"
  }, {
    "value": 1.238867,
    "name": "loss"
  }, {
    "value": 1.238867,
    "name": "loss"
  }, {
    "value": 1.238867,
    "name": "loss"
  }, {
    "value": 1.238867,
    "name": "loss"
  }, {
    "value": 1.238867,
    "name": "loss"
  }, {
    "value": 1.238867,
    "name": "loss"
  }, {
    "value": 1.238867,
    "name": "loss"
  }, {
    "value": 1.238867,
    "name": "loss"
  }, {
    "value": 1.238867,
    "name": "loss"
  }, {
    "value": 1.238867,
    "name": "loss"
  }, {
    "value": 1.238867,
    "name": "loss"
  }, {
    "value": 1.234115,
    "name": "loss"
  }, {
    "value": 1.234115,
    "name": "loss"
  }, {
    "value": 1.234115,
    "name": "loss"
  }, {
    "value": 1.234115,
    "name": "loss"
  }, {
    "value": 1.234115,
    "name": "loss"
  }, {
    "value": 1.234115,
    "name": "loss"
  }, {
    "value": 1.234115,
    "name": "loss"
  }, {
    "value": 1.234115,
    "name": "loss"
  }, {
    "value": 1.234115,
    "name": "loss"
  }, {
    "value": 1.234115,
    "name": "loss"
  }, {
    "value": 1.234115,
    "name": "loss"
  }, {
    "value": 1.234115,
    "name": "loss"
  }, {
    "value": 1.234115,
    "name": "loss"
  }, {
    "value": 1.234115,
    "name": "loss"
  }, {
    "value": 1.234115,
    "name": "loss"
  }, {
    "value": 1.234115,
    "name": "loss"
  }, {
    "value": 1.199203,
    "name": "loss"
  }, {
    "value": 1.199203,
    "name": "loss"
  }, {
    "value": 1.199203,
    "name": "loss"
  }, {
    "value": 1.199203,
    "name": "loss"
  }, {
    "value": 1.199203,
    "name": "loss"
  }, {
    "value": 1.199203,
    "name": "loss"
  }, {
    "value": 1.199203,
    "name": "loss"
  }, {
    "value": 1.199203,
    "name": "loss"
  }, {
    "value": 1.199203,
    "name": "loss"
  }, {
    "value": 1.199203,
    "name": "loss"
  }, {
    "value": 1.199203,
    "name": "loss"
  }, {
    "value": 1.199203,
    "name": "loss"
  }, {
    "value": 1.188584,
    "name": "loss"
  }, {
    "value": 1.188584,
    "name": "loss"
  }, {
    "value": 1.188584,
    "name": "loss"
  }]
}


// display
displayGraph("#graph1", data.lr, "lr", 50, 400, 150, "basis", true, 1000, 1000); //linear
displayGraph("#graph2", data.lr, "lr", 100, 400, 150, "basis", true, 1000, 1000); //linear
// update data
setInterval(function() {
  var lr = dataIn.lr.shift();
  if (lr) data.lr.push(lr);
  var loss = dataIn.loss.shift();
  if (loss) data.loss.push(loss);
}, 1000);

path {
  /*stroke: steelblue;*/
  stroke-width: 1;
  fill: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div style="display:block;height:500px;">
  <div id="graph1" class="aGraph" style="height:200px;"></div>
  <div id="graph2" class="aGraph" style="height:200px;"></div>
</div>

​

Answer 1

您不仅应该更新axis的域，还应该在适当的dom-节点上回忆更新的axis。

用这种方式重写redrawWithAnimation函数：

function redrawWithAnimation() {
  // update domains
  x.domain([0, data.length > 10 ? data.length : 10]);

  y.domain([0, d3.max(data, function(d) {
    return d.value;
  })]);

  // recall new scales on nodes
  domXAxis
    .transition()
    .duration(400)
    .call(xAxis.scale(x));

  domYAxis
    .transition()
    .duration(400)
    .call(yAxis.scale(y));
  // other redrawing code
  graph.selectAll("path")
    .data([data])
    .attr("transform", "translate(" + x(1) + ")")
    .attr("d", line)
    .transition()
    .ease("linear")
    .duration(transitionDelay)
    .attr("transform", "translate(" + x(0) + ")");
}

检查这把小提琴。我意识到这并不是你最终想要的。我希望我指定了你如何正确地更新轴。