3

我正在尝试使用 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仅提供缩放处理程序并处理拖动和缩放。

我在这里做错了什么？

4

4 回答 4

4

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

附加提示：为了让您自己更轻松，请确保将呼叫（缩放）应用于您要拖动的任何内容的父级。这将防止紧张和摇晃的行为。

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

于 2012-12-04T17:21:29.923 回答
4

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

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

.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);
于 2014-05-14T07:09:43.040 回答
0

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

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

于 2013-02-17T22:45:41.400 回答
0

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

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

于 2020-02-04T17:12:14.147 回答