크기를 조정하고 함께 번역하는 방법?

Question

D3 힘 그래프를 동시에 확장 및 변환하려고합니다. 예 : 버튼을 클릭하면 400 %로 축척 된 다음 화면 중앙에 표시됩니다. 이것은 모두 부드러운 애니메이션 효과와 함께 발생해야합니다.

//animate vis to visible area 
vis.transition() 
    .duration(2000) 
    .attr("transform", "scale(" + someScaleValue + ")" + "center("0,0)"); 

이렇게하면 크기 조정은 잘되지만 그래프는 가운데에 배치되지 않습니다. 오른쪽 아래 모퉁이로 이동합니다.

vis.transition() 
    .duration(2000) 
    .attr("transform", "scale(" + someScaleValue + ")"); 

두 번째로 번역 할 때 저울이 100 %로 재설정되는 이유는 무엇입니까? 이 역시 작동하지 않습니다

vis.transition() 
    .duration(2000) 
    .attr("transform", "scale(" + scaleValue + ")" + "translate(0,0)");` 

:

는 또한 사용했습니다. 도와주세요.

Answer 1

center(0,0)은 transform, as per the spec과 함께 사용되는 유효한 변환 정의가 아닙니다. "-width/2 -height/2 width height" : 화면 (vis의 보통 왼쪽 상단 모서리)의 중심으로 객체를 취할 translate(0, 0)을 원하는 경우에

, 당신은 될 수있는 외부 svg 요소의 viewBox 설정할 수 있습니다. 이것은 svg 요소 내부의 좌표계를 중앙이 (0, 0)에 있도록 설정합니다. 또는 translate(width/2, height/2)을 사용할 수 있습니다.

또한 .attr('transform', ...)을 호출 할 때마다 transform 특성의 이전 값을 덮어 씁니다. 번역에 대한 원래의 배율을 잃어 버릴 수있는 이유입니다. 가장 좋은 해결책은 transform 속성의 배율이 일정한 g 안에있는 vis 요소를 일정하게 유지하는 것입니다.