在d3中向动态折线图添加轴

Question

I want to add axis to below the line chart, i want x-axis also to be dynamically updated as the chart update. 我想在折线图下方添加轴，我希望X轴也随着图表更新而动态更新。 i am not able to shift the x-axis like wise the line chart is moving. 我无法像折线图移动一样移动x轴。

Please let me know if anything else required. 如果还有其他要求，请告诉我。

Thanks. 谢谢。

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

Added jsfiddle : http://jsfiddle.net/1yutssve/ 添加了jsfiddle： http : //jsfiddle.net/1yutssve/

Answer 1

You can animate the axis by merely doing a .call(xAxis) on the old x-axis. 您可以通过仅在旧的x轴上执行.call(xAxis)对轴进行动画处理。 However, you are not updating the scales while animating the data. 但是，在为数据设置动画时，不会更新比例。 Hence, you will need an alternate scale to be able to do it well: 因此，您将需要一个替代的秤来做好它：

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

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

在d3中向动态折线图添加轴

问题描述

1 个解决方案

解决方案1
1 已采纳 2014-11-24 06:38:56

在d3中向动态折线图添加轴

问题描述

1 个解决方案

解决方案1 1 已采纳 2014-11-24 06:38:56

解决方案1
1 已采纳 2014-11-24 06:38:56