Question

我只是在学习d3，我想知道它是否是每隔一秒渲染svg行的正确方法？

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>d3 test</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
</head>

<body>
<script>
    //Width and Height
    var w = 500;
    var h = 50;

    //Create SVG Element
    var svg = d3.select("body")
                .append("svg")
                .attr("width", w)
                .attr("height", h);

    //Global array
    var linedata = [];

    //random multiplier
    var randNum = 50;

    setInterval(function() {
        var random = {
            a: Math.floor(Math.random()*randNum),
        };

        linedata = [ "M 0 0 L 200 " + (100+random.a) ];

        line = svg.selectAll("path")
                   .data(linedata)
                   .enter()
                   .append("path");

        line.attr("d", function(d) {
                return d;
            })
            .attr("stroke","orange")
            .attr("stroke-width", 7)
            .attr("fill","none");
    }, 10);

    setInterval(function() {
        svg.selectAll("path")
        .remove();
    }, 10);
</script>

问题我的问题是，即使我在setInterval设置的时间非常快，行仍然会闪烁。

我想要的是线条不会闪烁并且每毫秒都能顺利渲染或者没有注意到它会重新渲染

我想要实现的与此类似，但它在Javascript和Jquery中不与d3库

SVG animation with mousemove function inside setInterval function

问候。

Answer 1

如果你有一个功能添加一些东西而另一个删除它，它会闪烁。只需移动现有的行。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>d3 test</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
</head>

<body>
<script>
    //Width and Height
    var w = 500;
    var h = 50;

    //Create SVG Element
    var svg = d3.select("body")
                .append("svg")
                .attr("width", w)
                .attr("height", h);

    var line = svg.append("path")
            .attr("stroke","orange")
            .attr("stroke-width", 7)
            .attr("fill","none");

    //Global array
    var linedata = [];

    //random multiplier
    var randNum = 50;

    setInterval(function() {
        var random = {
            a: Math.floor(Math.random()*randNum),
        };

        linedata = [ "M 0 0 L 200 " + (100+random.a) ];

        line.data(linedata);
      
        line.attr("d", function(d) {
                return d;
            })
    }, 10);

</script>

d3 setInterval上的闪烁线

1 个答案: