얻기 예상 속성 값은 예를 들어

Question

나는 전환이 : 내가 알아야 할 순간

var sel = container.selectAll('div') 
    .transition() 
    .duration(1000) 
    .attr('transform', 'translate(100,500)'); 

어디에 요소의 땅에, 예를 들어, 일부

setTimeout(() => { 
    var value = d3.select('div#target') 
     .expectedAttr('transform'); 
    assertEqual(value, 'translate(100,500)'); 
}, 500); 

D3에는 이와 같은 내장 기능이 있습니까? 그렇지 않으면 나는 전달 된 값을 저장하는 d3.transition().attr() 메서드를 통해 자체 래퍼를 작성해야합니다.

편집은

나는 D3가 전환에 관한 정보를 포함 할 것 같다 요소 __transition__ 필드를 만들고 있음을 발견했습니다,하지만 난 거기에 목표 속성 값을 찾을 수있는 방법을 볼 수 없습니다.

Answer 1

처음에는 대상 값이 클로저에 의해 접근 불가능하게 숨겨져있는 것처럼 보이지 않을 것이라고 생각했습니다. 하지만 약간의 트릭 만 있으면이 값을 검색 할 수 있습니다.

당신은 transition.attr()를 호출 할 때, D3는 다음을 수행 할 것을 명심해야한다 :

선택한 각 요소에 대해

가, 지정된 목표 값에 지정된 이름의 속성에 대한 attribute tween을 만듭니다.

이 자동 생성 된 트윈은 transition.attrTween(attrName)을 호출하여 액세스 할 수 있습니다.

이 트윈이 D3에 의해 호출되면 interpolator을 반환합니다. 이것은 보간자를 만들 때 닫힌 목표 값에 대한 액세스 권한을 갖습니다. 워드 프로세서 더 아래 읽을 때 실제 트릭 분명해진다 :

(가) 보간이 다음 전환 프레임마다 호출 반환 위해, 완화 시간이 경과되는 t 일반적 범위는 [0, 1].

전이 – 끝에 t –의 최종 값이 1, 당신이 전이의 목표 값을 산출이 값과 이전에 취득한 보간을 호출 할 수있을 것으로 안다.

var targetValue = transition 
    .attrTween("x2")   // Get the tween for the desired attribute 
    .call(line.node())   // Call the tween to get the interpolator 
    (1);      // Call the interpolator with 1 to get the target value 

다음 예는 이미 실행중인 전환에 대한 목표 값을 인쇄하여 보여줍니다.

var line = d3.select("line"); 
 
line 
 
    .transition() 
 
    .duration(2000) 
 
    .attr("x2", 100); 
 
    
 
setTimeout(function() { 
 
    var transition = d3.active(line.node()) // Get the active transition on the line 
 
    var targetValue = transition 
 
    .attrTween("x2")      // Get the tween for the desired attribute 
 
    .call(line.node())      // Call the tween to get the interpolator 
 
    (1);         // Call the interpolator with 1 to get the target value 
 
    console.log(targetValue);    // 100 
 
}, 1000);

<script src="https://d3js.org/d3.v4.js"></script> 
 

 
<svg><line x2="0" y2="100" stroke="black"></line></svg>

같은 당신이 트윈을 얻을 수 transition.styleTween()을 사용 스타일의 전환에 대한 사실이 보유하고

.