缩放事件覆盖 d3js 中的拖动行为答案

【问题标题】：Zoom event overrides Drag behavior in d3js缩放事件覆盖 d3js 中的拖动行为
【发布时间】：2012-11-23 18:19:25
【问题描述】：

我正在尝试使用 d3js 为圆形项目实现拖动和缩放事件处理程序。我已经为这两个事件添加了如下所示的行为

var circle = svg.append("circle")
    .attr("fill", "green")
    .attr("opacity", 0.6)
    .attr("cx", 100)
    .attr("cy", 100)
    .attr("r", 13)
    .call(d3.behavior.drag().on("drag", drag))
    .call(d3.behavior.zoom().on("zoom", zoom));

不缩放对象，拖动工作正常。放大/缩小对象后，拖动不起作用，但所有包含 mousedown 的事件都被捕获为“缩放”事件。

完整源代码请见http://jsfiddle.net/xTaDC/

似乎我不理解“d3.behavior”。 https://github.com/mbostock/d3/blob/master/examples/mercator/mercator-zoom-constrained.html 仅提供缩放处理程序并处理拖动和缩放。

我在这里做错了什么？

【问题讨论】：

您好，我也遇到了同样的问题，能否请您指出一个节点拖动、平移和缩放工作正常的工作示例？
d3js zoom 提供了拖动和缩放功能。缩放后，您可以 translate() 或 scale() 您的形状。见李维斯的回复。
具体来说，我无法在这个例子中实现节点拖动：bl.ocks.org/mbostock/3680999

标签： javascript svg zooming d3.js drag

【解决方案1】：

据我所知，d3 的缩放行为已经处理了拖动，所以拖动是多余的。尝试使用缩放的 d3.event.translate（这是一个 2 元素数组，因此如果您只想获取 x 值，您可以使用 d3.event.translate[0]）复制拖入中的功能你的变焦。

附加提示：为了让您自己更轻松，请确保将您的调用（缩放）应用到您要拖动的任何对象的父级上。这将防止紧张和颤抖的行为。

来源当然是 d3 wiki。 “这种行为会自动创建事件侦听器来处理容器元素上的缩放和平移手势。支持鼠标和触摸事件。” https://github.com/mbostock/d3/wiki/Zoom-Behavior

【讨论】：

【解决方案2】：

我遇到了类似的问题，并通过覆盖缩放的其他子事件来解决它。

在缩放和拖动事件监听器后添加以下代码

.on("mousedown.zoom", null)
.on("touchstart.zoom", null)
.on("touchmove.zoom", null)
.on("touchend.zoom", null);

所以完整的代码看起来像

var circle = svg.append("circle")
    .attr("fill", "green")
    .attr("opacity", 0.6)
    .attr("cx", 100)
    .attr("cy", 100)
    .attr("r", 13)
    .call(d3.behavior.drag().on("drag", drag))
    .call(d3.behavior.zoom().on("zoom", zoom))
    .on("mousedown.zoom", null)
    .on("touchstart.zoom", null)
    .on("touchmove.zoom", null)
    .on("touchend.zoom", null);

【讨论】：

【解决方案3】：

将您的图表附加到敏感事件区域（必须是最后一个附加）：

var rect = svg.append("svg:rect")
    .attr("class", "pane")
    .attr("width", w)
    .attr("height", h);

之后（不包括）在该区域添加事件管理

rect.call(d3.behavior.zoom().x(x).scaleExtent([0.5, 4]).on("zoom", draw));

绘制函数是

function draw() {
    svg.select("g.x.axis").call(xAxis);
    svg.select("g.y.axis").call(yAxis);
    svg.select("path.area").attr("d", area);
    svg.select("path.line").attr("d", line);
}

看这个例子：https://groups.google.com/forum/?fromgroups=#!topic/d3-js/6p7Lbnz-jRQ%5B1-25-false%5D

【讨论】：

【解决方案4】：

2020年使用d3.zoom开启缩放平移：https://observablehq.com/@d3/zoom

如果要启用背景平移，同时允许拖动圆圈，请参阅官方示例，其中 d3.drag 和 d3.zoom 用于不同的元素：https://observablehq.com/@d3/drag-zoom

【讨论】：