D3力布局：使拖动（缩放）平移更平滑 [英] D3 force layout: making pan on drag (zoom) smoother

问题描述

我有一个d3.js静态力布局图，可以变得相当大（有时它的一部分被剪辑），所以我想让用户通过拖动平移整个图形。我不认为我需要拖拽个别的节点，我有一种感觉只是会混淆，但想要使显示被svg边界裁剪的图的部分。

I've got a d3.js static force layout graph that can get rather big (sometimes parts of it are clipped), so I'd like to let the user pan the whole graph by dragging. I don't think I need dragging of individual nodes, I've got a feeling that's just going to be confusing, but would like to make it possible to show the parts of the graph that are clipped by the svg boundaries.

我有一个最小的例子，在 http://bl.ocks.org/3811811 使用

I've got a minimal example at http://bl.ocks.org/3811811 which uses

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平滑，到了我想，它会阻止人们尝试拖动功能。有人有一个线索为什么这种情况和/或如何解决它的想法？

to implement the panning, but I find it really "skittery" and not very smooth at all, to the point where I'm guessing it will stop people from trying the drag function at all. Has anyone got a clue why this happens and/or an idea for how to fix it?

推荐答案

问题是 d3.behavior.zoom 相对于点击项目的容器元素的鼠标位置，并且您正在移动容器元素！

The problem is that d3.behavior.zoom retrieves the current mouse position relative to the clicked item's container element, and you are moving the container element! So the relative position is constantly changing, hence the jittering effect you're seeing.

您可能想移动背景< rect> ，因此它是< svg> 元素的直接子元素。这实现了两件事：

You probably want to move the background <rect> so that it's a direct child of the <svg> element. This achieves two things:

1. 现在的位置将是相对于< svg>
因此可缩放区域更改，并且视口的某些部分不再可缩放。在同一个地方拥有背景< rect> 也能解决这个问题。


1. The position will now be relative to the <svg> container, which isn't moving.
2. Currently, you are moving the <rect> when you zoom or pan, so the zoomable area changes and some parts of the viewport are no longer zoomable. Having the background <rect> in the same place fixes this problem too.

这篇关于D3力布局：使拖动（缩放）平移更平滑的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！