如何消除“跳动"?使用d3.behavior.zoom()平移时 [英] How to remove "jumpiness" upon panning with d3.behavior.zoom()

问题描述

这是一个演示: http://jsbin.com/okUxAvE/18/edit? js，输出

我正在使用d3.behavior.zoom()(它也可以平移).我仅要平移，但不希望实际缩放.现在，当您拖动树的一部分时，重新绘制既怪异又跳跃"(因此，演示—看到它就是要理解我的意思).我假设我与click事件有某种冲突(在节点上单击会展开它们).但是，我看不到问题出在哪里，更不用说如何解决了.另外，我希望用户也可以通过拖动背景来平移，而不仅仅是定位在树的上方.

I'm using d3.behavior.zoom() (which also does panning). I only want panning and no actual zoom. Right now, when you drag part of the tree, redrawing is all weird and "jumpy" (hence the demo—to see it is to know what I mean). I'm assuming that I have some kind of conflict with the click event (clicking on nodes expands them). However, I can't see what the problem is, let alone how to fix it. Also, I would like the user to be able to pan by dragging the background as well, not only by positioning above the tree.

实际上，这里有两个问题:

So actually there are two questions here:

1. 缩放实现有什么问题，如何解决?和
2. 我该怎么做才能使整个画布平移"?

推荐答案

1. 缩放行为确定鼠标相对于鼠标所附加的元素的坐标，以查找平移.您已经修改了缩放行为所附加到的元素的位置，并因此修改了用于转换的相对坐标.因此，您会看到这种抖动.解决方案是将缩放行为附加到另一个元素，例如到SVG本身.这也解决了2.

1. The zoom behaviour determines the coordinates of the mouse relative to the element it is attached to to find the translation. You've modifying the position of the element the zoom behaviour is attached to and therefore the relative coordinates used for the transform. Hence you're seeing this jitter. The solution is to attach the zoom behaviour to another element, e.g. to the SVG itself. This also solves 2.

通过将缩放行为附加到SVG元素本身，可以使整个画布可拖动.然后，您只需要修改缩放处理程序即可在设置平移时考虑到边距.

The entire canvas can be made draggable by attaching the zoom behaviour to the SVG element itself. Then you just need to modify the zoom handler to take into account the margins when setting the translation.

要修复抖动并使整个画布可拖动，只需在创建SVG时更改行的顺序即可.

To fix the jitter and make the entire canvas draggable simply change the order of the lines when creating the SVG:

var svg = d3.select("#map").append("svg")
            .attr("width", width + margin.right + margin.left)
            .attr("height", height + margin.top + margin.bottom)
            .call(pan)
            .append("g")
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

然后，要固定平移偏移，请修改缩放处理程序:

Then, to fix the translation offset, modify the zoom handler:

function panned() {
  svg.attr("transform",
     "translate(" + (d3.event.translate[0] + margin.left) + "," +
                    (d3.event.translate[1] + margin.top) + ")");
}

完整示例此处.

这篇关于如何消除“跳动"?使用d3.behavior.zoom()平移时的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！