D3 력 레이아웃:을 만드는 팬에서 드래그(줌)부드럽

Question

가 d3.js 정적 힘 레이아웃을 그래프를 얻을 수 있는 오히려 큰(때로는 부품은 클리핑),그래서하고 싶은 사용자가 팬 전체 그래프로그램입니다.나지 않아야 한다고 생각 드래그의 개별 노드,나는 느낌이 있어요 그건 단지가 복잡한 것이지만,그것을 가능하여 부품의 그래프에 있는 겹 svg 니다.

나는 최소한의 예에 http://bl.ocks.org/3811811 을 사용하는

visF.append("rect")
 .attr("class", "background")
 .attr("width", width)
 .attr("height", height)
 .call(d3.behavior.zoom().on("zoom", redrawVisF));
function redrawVisF () {
  visF.attr("transform","translate(" + d3.event.translate + ")" + " scale(" + d3.event.scale + ")");
}

을 구현하는 이동,하지만 나는 그것이 정말로"skittery"가 아니라 아주 부드럽에서 모든 지점으로,나는 그것을 짐작하는 것이 멈추려고 사람들이 드다.는 사람이 단서를 가지고 왜 이런 일이 일어나 및/또는 아이디어에 대한 해결하는 방법은?

Answer 1

문제는 d3.behavior.zoom 검색는 현재 마우스 위치의 상대를 클릭한 항목의 컨테이너 요소,그리고 이동하고 있는 컨테이너 요소!그래서 상대적인 위치를 끊임없이 변화하는,따라서 jittering 효과가 있습니다.

당신은 아마 이동하려는 배경 <rect> 그래서 그것의 직접적인 아동의 <svg> 요소입니다.이 두 가지 목표를 달성:

1. 위치가 지금 상대 <svg> 컨테이너,는 움직이지 않는다.
2. 현재,이동 <rect> 확대/축소할 때 또는 팬,그래서 가능한 영역에 변화와 일부 부품의 뷰포트 더 이상 줌.을 가지는 배경 <rect> 같은 장소에서 수정이 이 문제는 너무입니다.