AngularJS + D3 : 첫 번째 전환이 무시됩니다.

Question

D3.js를 사용하여 도우넛 차트 시각화 작업을하고 있습니다. myWheel 지시문을 작성했으며 <my-wheel> -element에있는 val 속성의 변경 사항이 $watch 인 링크 함수에 있습니다.

데이터가 업데이트 될 때마다 시각화는 전환으로 업데이트되어야합니다. 정상적으로 작동하지만 전환이 처음 무시됩니다. this plunker을 참조하십시오.

데이터의 첫 번째 업데이트를 지연 ($timeout)하면 전환이 트리거됩니다.

문제가있는 아이디어가 있습니까?

Answer 1

donutDataSlice의 입력 선택에 selection.each 전화가 있으며 경로가 생성 될 때 this._current이 데이텀에 설정됩니다. 즉 처음으로 arcDataTween에 들어가면 this._current과 a은 같은 값입니다. 따라서 보간자는 처음부터 아무 것도하지 않습니다.

다른 몇 가지 문제가 있습니다.

function arcDataTween(a) { 
    var i = d3.interpolate(this._current, a); 
    this._current = i(0); 
    return function(t) { 
     return arcData(i(t)); 
    }; 
} 

당신은 보간의 시작 값으로 this._current를 사용하지만 당신이 this._current = i(0) 설정됩니다 arcDataTween에서는이 있습니다. 보간자를 0으로 호출하면 시작 값이 반환되므로 arcDataTween이 실행될 때마다 기본적으로 this._current을 같은 값으로 설정합니다. 원하는 것은 this_current = a (또는 이와 동등한, this._current = i(1))으로 설정하는 것입니다.

명명 규칙에 대한 간단한 설명으로, 사용자 지정 트윈의 첫 번째 인수는 실제로 데이터이므로 일반적으로 d으로 표시됩니다. 이 경우 a을 사용하면 세 번째 인수가 요소의 현재 특성 또는 스타일 값이고 일반적으로 a (예 : function arcDataTween(d, i, a) {})으로 표시되기 때문에 혼란 스러울 수 있습니다.

마지막으로, 초기 데이터는 0의 score가 있고 파이 레이아웃의 값으로 score을 사용하고 있기 때문에,이 경우에 startAngle로부터 및 endAngle에 대한 NaN이 반환합니다. 이 효과가 시각적으로 어떤 효과인지는 모르겠지만 아마 원하는 것은 아닙니다. 파이 레이아웃의 값 접근자는 항상 해당 세그먼트가 나타내는 파이의 비율을 나타내는 숫자를 반환해야합니다. NaN 각도를 피하기 위해 세그먼트 값을 계산하기 전에 점수 0으로 데이터를 필터링하는 것이 더 좋을 수 있습니다.