setInterval上的d3閃爍線
[英]d3 flickering line on setInterval
問題描述
我只是在學習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動畫
問候。
1 個解決方案
解決方案1
1 已采納 2015-10-09 08:14:44
如果您有一個函數添加了某項功能，而另一個函數將其刪除了，那么它將閃爍。 只需移動現有的線。
<!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>
從CSV更新數據時，setInterval上的d3閃爍文本
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.