d3으로 브러시 블 줌 가능한 타임 라인

Question

사용자가 확대/축소하거나 확대 할 영역을 선택할 수있는 타임 라인을 만들고 싶습니다. 처음처럼의 몇 가지 예는 다음과 같습니다 https://bl.ocks.org/mbostock/4015254 또는 브러시로 영역을 확대 : https://bl.ocks.org/mbostock/f48fcdb929a620ed97877e4678ab15e6
하지만 모두를 수행하는 예를 찾을 수 없습니다. 어떻게 둘 다 할 수 있습니까? 아니면 제가 놓친 예제가 있습니까?

Answer 1

이것은 구현하기 가장 쉬운 방법은 아닙니다. 브러시 기반 확대/축소는 d3.zoom에 의존하지 않고 대신 이벤트를 실행하는 수신기를 통해 확대/축소를 수행하여 축의 축척을 조정하고 그에 따라 플롯 요소를 이동하는 데 필요한 모든 작업을 수행합니다.

비교에서, 모든 스크롤링 기반 줌로서는 일반적으로 확대하고 다양한 차트 요소를 갱신 할 책임이다/패닝 동안 플롯에 수행 된 모든 변환 추적하는 d3.zoom() 동작을 이용하는 d3.zoom에 의존한다. 어려움은 2 가지 접근 방식이 상당히 다르다는 사실에 있습니다. 브러시를 통해 차트 뷰를 수동으로 변경하는 경우 d3.zoom이 참조하는 내부 줌 변환을 업데이트하는 방법을 찾아야 만합니다. 브러시 기반 줌 이벤트.

d3.zoom은 다른 곳에서 정보를 입력하도록 설계되지 않았으며 수행 된 변환의 내부 기록이 업데이트/변경 가능하지 않기 때문에 쉬운 일은 아닙니다. selection.call(zoom.transform, d3.zoomIdentity);을 통해 변환을 업데이트 할 수 있지만 불행하게도 실제 확대/축소 동작과 관련된 일련의 이벤트가 발생합니다. 이는 이미 브러시 기반 확대/축소를 사용하여 모든 확대/축소 동작을 처리했기 때문에 원하는 것이 아닙니다. 그래서 예를 들면

// WARNING: Ugly mutation of __zoom property of pan/scroll-zoom rect to 
// reset the transform without having to fire events associated with zoom 
// d3.select(".zoom").node().__zoom = {k: 1, x: 0, y: 0}; <-- Fails since __zoom contains other hidden objects 
scrollZoom.node().__zoom["k"] = 1; 
scrollZoom.node().__zoom["x"] = 0; 
scrollZoom.node().__zoom["y"] = 0; 

: 다음과 같이 내가 줌 변환을 다시 사용할 수 있었다 못생긴, 그러나 효과적인 해결 방법은 d3.zoom 행동에 바인딩 된 DOM 노드의 실제 .__zoom 필드에 돌연변이가있는 것입니다 사각형 확대/축소를위한 2D 브러시를 원하지만 패닝 및 마우스 스크롤을위한 d3.zoom 기반 확대/축소를 사용하면 2D 브러시를 사용하여 확대/축소 할 때마다 d3.zoom 변환을 위와 같은 ID 변환으로 재설정해야합니다. 2D 브러시 기반의 확대/축소 동작을 패닝/마우스 스크롤링 동작으로 체인 연결 할 때 d3.zoom이 디스플레이의 뷰와 동기화되지 않는 레코드 변환으로 인해 (2D 브러시로 인해) 패닝/스크롤링 응답의 지터를 방지하고 추악하게 만듭니다 기반 줌은 d3.zoom의 지식없이 뷰를 변경합니다).

d3.zoom이는 현재 모두 X에 대한 공통의 줌 배율을 지원하고 Y 축 것을 (Source)를 한계에있다 : 여기

주의하는 것이 중요하다 다른 무언가이다. 2D 브러시 기반 확대/축소 기능은 X와 Y에서 서로 다른 확대/축소 배율을 생성하기 때문에 2-D 브러시 기반 확대/축소를 d3.zoom 기반 접근 방식으로 매핑 할 수있는 방법이 없다는 것을 의미합니다. 일관된 접근 방식을 사용하여 최소한의 문제 만 해결하려면 , d3.xyzoom을 사용해 보길 권합니다. 이것은 d3.zoom의 포크이며 X 축과 Y 축의 서로 다른 축척에 대한 지원을 구현합니다. 이렇게하면 d3.zoom에 입력 할 수있는 2D 브러시 선택에 대한 해당 X 및 Y 확대/축소 배율 및 변환 값을 계산할 수 있으므로 공통 접근법을 사용하여 모든 확대/축소를 수행 할 수 있습니다 코드 중복).

1 차원 브러시 기반 줌에만 관심이 있다면,이를 d3에 매핑 할 수 있어야합니다.확대/축소 접근 방식을 사용하여 차트의 모든 축과 다른 그래픽 요소의보기 및 배율 조정을 처리하는 두 가지 경로를 처리 할 필요가 없습니다.

https://bl.ocks.org/mbostock/34f08d5e11952a80609169b7917d4172

나는이 게시물의 길이에 대해 사과하고 비트 방랑 인 경우 : 다음은이의 좋은 예입니다. 저는 며칠 후에 작업을 한 블록 씩 모으기 위해 노력하고 있습니다. 여기서 돌아 서서 링크를 게시하려고 노력할 것입니다. 나는 일주일 전에 D3을 배우기 시작 했으므로 나는 그 길을 따라 배우고있다.