D3 实时图仅在延迟后显示

d3 realtime graph appears only after a delay

本文关键字：延迟 显示 实时 D3      更新时间：2023-09-26

我做了一个实时图来绘制一个简单的正弦波。基本上，代码仅从此链接中的路径转换 d3 示例略有修改：http://bost.ocks.org/mike/path/

我的代码在这里：http://jsfiddle.net/bgzsmqmw/2/

然而，有一些奇怪的行为我无法解释。

如果我使用 random（） 函数生成的 y 值创建新的实时数据，那么当数据被添加并滚动到时域时，它会正确显示。

但是，如果我使用 Math.sin（） 生成正弦波，则直到经过明显的延迟后，该行才会显示，然后突然出现整行。唯一的区别是生成新数据点的函数。

在我链接的 jsfiddle 中，尝试依次使用"//尝试这两行："评论下方的两行中的每一行。这将产生我描述的两种行为情况。

知道发生了什么吗？

// TRY THESE TWO LINES:
//var sin = function(){return 0.2*Math.sin(theta);}; // Line only shows up after delay
var sin = function(){return random();}; // Line shows up immediately
这是因为

你在给theta和dtheta赋值之前调用函数newData。所以第一次调用这个函数时，theta 和 dtheta 是未定义的 （NaN），这使得 sin 函数返回 NaN。当 x 或 y 输入值为 NaN 时，D3 的行函数会创建无效的 SVG 路径。这种情况会继续发生，直到 NaN 值从数据数组中"向左移动"，这就是为什么您最初看不到该行并且当它出现时，它会突然出现

。 
newData();
var theta = 0;
var dtheta = 1;
function newData()
{
    theta += dtheta;
    //var sin = function(){return 0.2*Math.sin(theta);};
    var sin = function(){return random();};
    data.push({x : new Date(), y : sin()});
};

要解决此问题，只需在调用 newData 之前将以下两行移动到顶部。请参阅此处的工作小提琴：http://jsfiddle.net/bgzsmqmw/4/

var theta = 0;
var dtheta = 1;
相关文章：