d3.js - 在 D3 中查找拖动距离

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))

我希望拖动行为能够了解自拖动开始以来用户拖动了多远。目前，我添加了一个 attr在 dragstarted它标记了初始位置，然后在 dragged 期间检查当前位置并以这种方式计算。

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

Answer 1

根据API ，这些是事件对象在拖动事件期间暴露的字段:

• target - the associated drag behavior.
• type - the string “start”, “drag” or “end”; see drag.on.
• subject - the drag subject, defined by drag.subject.
• x - the new x-coordinate of the subject; see drag.container.
• y - the new y-coordinate of the subject; see drag.container.
• dx - the change in x-coordinate since the previous drag event.
• dy - the change in y-coordinate since the previous drag event.
• identifier - the string “mouse”, or a numeric touch identifier.
• active - the number of currently active drag gestures (on start and end, not including this one).
• sourceEvent - the underlying input event, such as mousemove or touchmove.

如您所见， 都没有拥有您正在寻找的值(value)。

但是，有一个简单的解决方案，可能不适合您，因为您明确说明 “无需计算” .

解决方案包括获取“开始”监听器的位置并将其与“结束”监听器的位置进行比较:

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))
})

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

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))
}))

svg {
  border: 1px solid black;
}

.as-console-wrapper { max-height: 25% !important;}

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

再次:我知道你说“没有计算”，但由于没有你想要的本地属性，我认为值得展示它进行计算是多么简单。