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

Question

I'm drawing a line path that is updated adding new point to it. Since I do not know the x axis length, that depends on the time the progress lasts, I would like to scale the y data by this. In the example I have the sampe graph for two different scale of the x axis, so I have passed a xScale value to the displayGraph method, while I would like to calculate this dynamically to be adapted to the current data size.

 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

You should not only update domain for axis, but also recall updated axis on appropriate dom-node.

Rewrite you redrawWithAnimation function this way:

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

Check this fiddle . I realize it is not exactly what you want in the end. I hope I specified you how to update axis properly.