个人中心
gpt4 book ai didi

javascript - 在d3中的动态折线图中添加轴

转载 作者：行者123 更新时间：2023-11-28 00:48:17 24 4
gpt4 key购买 nike

我想将轴添加到折线图下方，我希望 x 轴也随着图表更新而动态更新。我无法像折线图移动那样移动 x 轴。

如果还有其他需要，请告诉我。

谢谢。

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

最佳答案

您只需在旧的 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/

关于javascript - 在d3中的动态折线图中添加轴，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27097975/

24 4 0
文章推荐： Javascript 正则表达式匹配返回末尾带有逗号的字符串
文章推荐： c++ - 在Mac OS X Lion(10.8.2)上使用Xcode 4.6安装OpenCV。
文章推荐： javascript - 如何访问Windows应用商店应用程序包中的文件
文章推荐： javascript - JavaScript 中的 JSON 到 Excel 文件
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com