변경된 데이터 선택 받기

Question

내 데이터는 숫자 배열입니다.

숫자가 스왑되어 배열이 무작위로 지정됩니다.

각 숫자는 막대 차트에 막대로 표시됩니다.

각 단계에서 색상과 불투명도 (깜박임 효과)를 변경하는 간단한 전환을 실행하여 스왑 된 두 요소를 강조하고 싶습니다. 지금 현재로서는

, I 데이터 셋 복사 교환 전에, I는 체크 업데이트 선택 애니메이션 때, 상기 번호는 동일한 위치에 이전 데이터 집합의 값과 그 값을 비교하여 이동했는지 : 만약 내가 다른 색상과 불투명도를 변경합니다.

bars.transition() 
     .attr("fill", function(d, i) { return d !== previous[i] ? "green" : "blue"; }) 
     .attr("opacity", function(d, i) { return d !== previous[i] ? 0.5 : 1; }) 
    .transition() 
     .attr("x", getX) 
    .transition() 
     .attr("fill", "blue") 
     .attr("opacity", 1); 

은 "문제는"기존의 모든 바,뿐만 아니라 업데이트 된 사람을 "영향"한다는 것이다 : 여기

는 코드입니다. 이 나는이 좋지 않은 것 같다 (같은 위치에 다른 바 "움직임"과 채우기가 같은 색으로 "변화"입니다) 표시되지 않지만

• :

  나는이 문제가 (100 개의 막대가 ID 작업의 98 %를 사용하여) 많은 쓸모없는 처리가 있기 때문에 성능 관점에서 볼 때 매우 유용합니다.

• 또한 변경된 데이터의 특수한 실행 경로는 "아무것도하지 않는"경로로 (조건문을 통해) 인터리브되어 명확하게 이해 및 유지 관리에 적합하지 않습니다.

_

합니까 D3는 "변경된 데이터"의 이러한 개념을 가지고?

D3 방식으로 동일한 작업을 수행 할 수 있습니까?

_ 사전에

감사합니다.

Answer 1

이 작업을 수행하는 D3 방법은 값에 데이터를 키잉하는 것입니다. 즉, 변경된 각 막대는 "새로운"데이터 항목이므로 .enter() 및 .exit() 선택 사항에 따라 적절하게 처리 할 수 ​​있으므로 변경된 내용에 직접 액세스 할 수 있습니다.

그러나 바를 쉽게 "옮길"수 없습니다. 한 막대의 위치를 ​​변경하는 대신 하나를 제거하고 다른 위치에 다른 막대를 추가합니다. 물론 입력과 종료 선택을 해킹 할 수는 있지만, 그런 종류의 시도는 중요합니다.

대신 값이 변경된 막대 만 포함하도록 선택 항목을 필터링 한 다음 해당 항목을 조작합니다. 필요한 것은 .filter()으로 전화하면 나머지 코드는 변경되지 않습니다.

bars.filter(function(d, i) { return d !== previous[i]; }) 
    .transition() 
    .attr("fill", "green") 
    .attr("opacity", 0.5) 
.transition() 
    .attr("x", getX) 
.transition() 
    .attr("fill", "blue"); 
    .attr("opacity", 1);