d3实时图形仅在延迟后出现

Question

我制作了用于绘制简单正弦波的实时图形。 基本上，该代码仅在以下链接的“路径转换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

Answer 1

这是因为要在将值分配给theta和dtheta之前调用newData函数。 因此，第一次调用此函数时，theta和dtheta是未定义的（NaN），这使sin函数返回NaN。 当x或y输入值为NaN时，D3的line函数将创建无效的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;