도넛 형 차트가 새 값으로 업데이트되지 않습니다.

Question

배열의 객체 값을 기반으로 렌더링 된 도넛 형 차트가 있습니다. 초기 렌더링은 정상적으로 작동하지만 업데이트가 작동하지 않는 것처럼 보입니다. 데이터를 변경하지만 시각적으로 업데이트되지 않습니다. 나는이 예를 다음에 : 여기 http://jsfiddle.net/N5Znf/

그리고있어 내 현재 코드 : http://jsbin.com/eGaziZA/1/edit

내 코드에서 관련 업데이트 부분 :

이 가

$scope.dataset = [ 
    metric: 'advocacy', 
    amount: 1 
    }, 
    { 
    metric: 'appreciation', 
    amount: 8 
    }, 
    { 
    metric: 'awareness', 
    amount: 1 
    } 
]; 

arcs = arcs.data(pie($scope.dataset)); 
arcs.transition().duration(500); 

가

사람이 올바른 방향으로 제발 포인트 수 있을까요? 당신이 반복되지 않도록 http://jsbin.com/eGaziZA/3/edit이

나는이 (가) initialrender 및 업데이트 기능에서 방법을 아마 추상적 인 렌더링 것 :

Answer 1

당신은 새로운 데이터를 제공 한 후

.attr({ 
      d: arc, 
      'class': function (d) { 
       return d.data.metric; 
      } 
      }) 

를 업데이트를 다시 적용에 가입해야 암호. 이 예제에서는 전환 효과가 좋지 않지만 d3의 파이 레이아웃에서는 작동하지 않으므로 모양을 더 좋게 만드는 방법을 알지 못합니다.

Answer 2

정말 새 데이터를 기반으로 호를 업데이트하는 부분이 누락되었습니다. 즉, 업데이트 함수의 마지막 줄은 arcs.transition(). duration (500) .attr ("d", arc);

이어야합니다.

실제로 곡선을 선형으로 보간 할 수 없으므로 완전히 예상대로 작동하지 않습니다. 그래서 그렇게

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

같은 사용자 정의 트윈 기능을 추가합니다 (._current 멤버를 초기화 잊어되지 않음) 대신에 사용합니다. 전체 예제 here.