setInterval上的d3闪烁线

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库一起使用

在setInterval函数内部具有mousemove函数的SVG动画

问候。

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>

setInterval上的d3闪烁线

问题描述

1 个解决方案

解决方案1
1 已采纳 2015-10-09 08:14:44

setInterval上的d3闪烁线

问题描述

1 个解决方案

解决方案1 1 已采纳 2015-10-09 08:14:44

解决方案1
1 已采纳 2015-10-09 08:14:44