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). 죄 함수가 NaN을 반환합니다. D3의 라인 함수는 x 또는 y 입력 값이 NaN 일 때 잘못된 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;