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;