Question

我已经有一组D3元素（它们恰好是文本节点，但我认为它并不重要）我将拖动行为附加到：

        paragraphs.enter().append("text")
            .text(function (d, i) { return d })
            .attr("x", function (d, i) { return (i + 1) * 32 })
            .attr("y", function (d, i) { return (i + 1) * 16 })
            .attr("fill", color)
            .call(d3.drag()
                .on("start", dragstarted)
                .on("drag", dragged)
                .on("end", dragended))

我希望拖动行为能够了解自dragstart以来用户拖动的距离。目前，我在attr中添加dragstarted标记初始位置，然后在dragged检查当前位置并按此计算。

有没有办法找到自拖动start后拖动的距离而不计算它，只是直接来自拖动事件？我看过dx / dy，但它们似乎只计算自上次拖动事件以来，因此该值始终为低个位数。

Answer 1

根据API，这些是在拖动事件期间事件对象公开的字段：

target - 关联的拖动行为。

type - 字符串“start”，“drag”或“end”;见drag.on。

subject - 拖动主题，由drag.subject定义。

x - 主题的新x坐标;见drag.container。

y - 主题的新y坐标;见drag.container。

dx - 自上次拖动事件以来x坐标的变化。

dy - 自上次拖动事件以来y坐标的变化。

identifier - 字符串“mouse”或数字触摸标识符。

active - 当前活动拖动手势的数量（开始和结束时，不包括此手势）。

sourceEvent - 基础输入事件，例如mousemove或touchmove。

如您所见，其中没有包含您要查找的值。

然而，有一个简单的解决方案，可能不适合你，因为你明确说明了＆＃34;没有计算＆＃34; 。

解决方案包括在＆＃34;开始＆＃34;听众并将其与＆＃34; end＆＃34;的位置进行比较。监听器：

d3.drag().on("start", function(d) {
    d.startX = d.x;
    d.startY = d.y;
}).on("drag", function(d) {
    d3.select(this).attr("cx", d.x = d3.event.x).attr("cy", d.y = d3.event.y);
}).on("end", function(d) {
    console.log("x distance: " + (d.x - d.startX))
    console.log("y distance: " + (d.y - d.startY))
})

这是一个简单的演示，拖动圆圈：

＆＃13;

var svg = d3.select("svg");
var circle = svg.append("circle")
  .datum({
    x: 150,
    y: 75
  })
  .attr("cx", function(d) {
    return d.x
  })
  .attr("cy", function(d) {
    return d.y
  })
  .attr("r", 10)
  .attr("fill", "teal");

circle.call(d3.drag().on("start", function(d) {
  d.startX = d.x;
  d.startY = d.y;
}).on("drag", function(d) {
  d3.select(this).attr("cx", d.x = d3.event.x).attr("cy", d.y = d3.event.y);
}).on("end", function(d) {
  console.log("x distance: " + (d.x - d.startX))
  console.log("y distance: " + (d.y - d.startY))
}))

＆＃13;

svg {
  border: 1px solid black;
}

.as-console-wrapper { max-height: 25% !important;}

＆＃13;

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg></svg>

＆＃13;

再一次：我知道你说＆＃34;没有计算＆＃34; ，但由于没有你想要的本地属性我认为值得展示如何很简单，它正在进行计算。

在D3中找到拖动距离

1 个答案: