將軸添加到d3中的動態折線圖

我想將軸添加到折線圖下方，我希望x軸也可以動態更新爲圖表更新。我不能像靈巧線圖移動那樣移動X軸。將軸添加到d3中的動態折線圖

請讓我知道是否有其他要求。

謝謝。

<html> 
<head> 
    <title>line chart</title> 
    <script src="http://d3js.org/d3.v2.js"></script> 
    <style> 
     /* tell the SVG path to be a thin blue line without any area fill */ 
     path { 
      stroke: steelblue; 
      stroke-width: 1; 
      fill: none; 
     } 
    </style> 
</head> 
<body> 
<p> <div id="graph1" class="aGraph" style="width:3000px; height:150px;"></div> 
</p> 
<script> 
    var width = 400; 
    var height = 150; 

    // create an SVG element inside the #graph div that fills 100% of the div 
    var graph = d3.select(graph1).append("svg:svg").attr("width", "300").attr("height", "300"); 

    // create a simple data array that we'll plot with a line (this array represents only the Y values, X will just be the index location) 
    var data = [3, 6, 2, 7, 5, 2, 1, 3, 8, 9, 2, 5, 9, 3, 6, 3, 6, 2, 7, 5, 2, 1, 3, 8, 9, 2, 5, 9, 2, 7, 5, 2, 1, 3, 8, 9, 2, 5, 9, 3, 6, 2, 7, 5, 2, 1, 3, 8, 9, 2, 9]; 
    // X scale will fit values from 0-10 within pixels 0-100 
    var x = d3.scale.linear().domain([0, 48]).range([-5, width]); // starting point is -5 so the first value doesn't show and slides off the edge as part of the transition 
    // Y scale will fit values from 0-10 within pixels 0-100 
    var y = d3.scale.linear().domain([0, 10]).range([0, height]); 

    var xaxis= d3.svg.axis().scale(x); 

    // create a line object that represents the SVN line we're creating 
    var line = d3.svg.line() 
     // assign the X function to plot our line as we wish 
     .x(function(d,i) { 
      return x(i); 
     }) 
     .y(function(d) { 
      return y(d); 
     }) 
     .interpolate("linear") 


     // display the line by appending an svg:path element with the data line we created above 
     graph.append("svg:path").attr("d", line(data)); 
     graph.append("g").attr("transform", "translate(0, 160)") 
     .call(xaxis); 
     function redrawWithAnimation() { 
      // update with animation 
      graph.selectAll("path") 
       .data([data]) // set the new data 
       .attr("transform", "translate(" + x(1) + ")") // set the transform to the right by x(1) pixels (6 for the scale we've set) to hide the new value 
       .attr("d", line) // apply the new data values ... but the new value is hidden at this point off the right of the canvas 
       .transition() // start a transition to bring the new value into view 
       .ease("linear") 
       .duration(300) // for this demo we want a continual slide so set this to the same as the setInterval amount below 
       .attr("transform", "translate(" + x(0) + ")"); // animate a slide to the left back to x(0) pixels to reveal the new value 

     } 

     setInterval(function() { 
      var v = data.shift(); // remove the first element of the array 
      data.push(v); // add a new element to the array (we're just taking the number we just shifted off the front and appending to the end) 
      redrawWithAnimation(); 


    },1000); 

</script> 

</body> 
</html>

新增的jsfiddle：http://jsfiddle.net/1yutssve/

來源

2014-11-24 user1915636

您可以通過僅僅對舊的x軸做.call(xAxis)動畫軸。但是，在動畫數據時，您並未更新比例。因此，你需要一個備用規模能夠做得很好：

// X scale will fit values from 0-10 within pixels 0-100 
var x = d3.scale.linear().domain([0, 48]).range([-5, width]); 

// Create a copy of the scale so that the original data still follows 
// the correct scale. 
var xAxisScale = x.copy(); 
var xaxis= d3.svg.axis().scale(xAxisScale); 

// ... 

// Add the class x-axis to be able to retrieve the axis for animation later. 
graph.append("g").classed('x-axis', true) 
    .attr("transform", "translate(0, 160)") 
    .call(xaxis); 

    function redrawWithAnimation() { 
     // ... 

     var oldDomain = xAxisScale.domain(); 
     xAxisScale.domain([oldDomain[0] + 1, oldDomain[1] + 1]); 

     // Values chosen from the transition above. Can be DRY-ied. 
     graph.select('.x-axis') 
     .transition() 
     .ease("linear") 
     .duration(300) 
     .call(xaxis); 
    }

工作演示：http://jsfiddle.net/2guoudya/

來源

2014-11-24 06:38:56

由於它的工作:) – user1915636 2014-11-24 21:58:55

將軸添加到d3中的動態折線圖

回答

相關問題