Question

我制作了一个用于绘制简单正弦波的实时图表。基本上，只是在此链接的路径转换d3示例中稍微修改了代码： http://bost.ocks.org/mike/path/

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

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

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

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

在我链接的jsfiddle中，尝试依次使用“// TRY THESE TWO LINES：”评论下面的两行中的每一行。这将产生我描述的两种行为。

知道发生了什么事吗？

// 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的线函数会创建无效的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;

d3实时图仅在延迟后出现

1 个答案: