javascript - 你如何解释 d3 event.x 和 event.y 坐标？-6ren

javascript - 你如何解释 d3 event.x 和 event.y 坐标？

转载作者：行者123 更新时间：2023-12-04 13:11:38

25

4

我正在尝试在 d3 (v6.2) 中实现拖动事件，但在解释 d3 x 和 y 坐标时遇到了一些麻烦。考虑以下代码。当我检查控制台输出时，在我看来，在拖动处理程序中:

event.x和 event.y是用户(图形)坐标对象位置的总和和 SVG 坐标中的总移动/距离吗？

event.dx和 event.dy是告诉您自上次更新以来您是否向左/向上移动 (-1)、未移动 (0) 或向右/向下 (1) 的指示器？

event.subject.x和 event.subject.y给出被拖动对象的位置？

如果我想要拖动的当前坐标(在用户/图形坐标或 SVG 坐标中)，我需要自己计算它们(参见代码中的示例，这似乎有效)？

我找不到这方面的细节记录在哪里。我的问题是:

上述印象是否正确？

如果不正确，获取当前拖动坐标的最佳方法是什么？

如果正确，为什么要对来自两个不同坐标系的值求和？这对我来说没有意义。

<html>
<body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/6.2.0/d3.min.js"></script>
<svg width="500" height="300"></svg>

<style>
circle.circ {
  fill: red;
  stroke: black;
  stroke-width: 1px;
}
</style>

<script>

function dragHandler(e, d){
    
    const objx = scaleX.invert(e.x - d.x + scaleX(d.x))
    const objy = scaleY.invert(e.y - d.y + scaleY(d.y))

    console.log(`x: ${e.x}, dx: ${e.dx} sx: ${e.subject.x} objx: ${objx}\ny: ${e.y} dy: ${e.dy} sy: ${e.subject.y} objy: ${objy}`)
}

var drag = d3
 .drag()
 .on('drag', dragHandler)

var x = [{x: 150, y: 150}]

var svg = d3.select("svg")

var margin = {
  top: 20,
  right: 80,
  bottom: 30,
  left: 50
}
var width = svg.attr("width") - margin.left - margin.right
var height = svg.attr("height") - margin.top - margin.bottom

g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")")

var scaleX = d3.scaleLinear().range([0, width]).domain([140, 160])
var scaleY = d3.scaleLinear().range([height, 0]).domain([140, 160])

g.append("g")
  .attr("class", "axis axis--x")
  .attr("transform", "translate(0," + height + ")")
  .call(d3.axisBottom(scaleX));

g.append("g")
  .attr("class", "axis axis--y")
  .call(d3.axisLeft(scaleY))

var circ = g.selectAll(".circ")
  .data(x)
  .enter()
  .append("circle")
  .attr("r", 5)
  .attr("cx", function(d) { return scaleX(d.x) })
  .attr("cy", function(d) { return scaleY(d.y) })
  .attr("class", "circ")
  .call(drag);

</script>

</body>
<html>

最佳答案

你的印象是对的。你可以

将局部坐标中的距离计算为 event.x/y 之间的差异和 event.subject.x/y

使用 event.clickDistance() 检索屏幕距离作为 setter/getter

这两者在不同的坐标系中工作。

客户端坐标系是浏览器视口(viewport)的。它们只是从 native DOM mousemove 中读取的事件。

用户坐标系是被拖动的东西之一，使用与编写 SVG 标记时使用的坐标相同的坐标。它们是根据带有 transform matrix 的客户端坐标计算得出的。 SVG API 提供。源代码是here .

您所做的是通常不需要的中间方式:通过应用 scaleX/Y变换，您计算了 系统中的坐标SVG View 框 ，一世。 e. viewBox 时找到的坐标系应用于最外层 <svg>元素。这可以是客户端坐标系，但前提是未设置属性，或者 width和 height元素的值与 viewBox 的内容匹配.
在几乎每个实际用例中，两者都会有所不同。 SVG 中的“可扩展” is just about that distinction .省略 viewBox就像您所做的那样，剥夺了您轻松扩展整个 grafic 的可能性。

关于javascript - 你如何解释 d3 event.x 和 event.y 坐标？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/64621834/

25

4

0

文章推荐： performance - dns-prefetch + 预连接与浏览器缓存

文章推荐： C# WPF OnMouseEnter 和 OnMouseLeave 循环

文章推荐： javascript - 如何在 svelte 项目中配置 sass 和 ESLint？

javascript - event.clientX 和 event.clientY 与 event.x 和 event.y
当检测鼠标x和y坐标时，最好像这样使用event.clientX和event.clientY: function show_coords(event){ var x=event.clientX;
javascript - Event.target、Event.toElement 和 Event.srcElement 之间有什么区别？
我有以下代码: document.oncontextmenu = function(evt) { evt = evt || window.event; console.log(evt.
events - 我需要一个类比 : Triggers and Events
对于另一个问题，我遇到了一个似乎偶尔出现在 SO 的误解。一些提问者似乎认为触发器之于数据库就像事件之于 OOP 一样。有没有人有一个很好的类比来解释为什么这是一个有缺陷的比较，以及误用它的后果？
events - 如何获取删除键的 event.keyCode？
$('body').keypress(function(event){ if(event.keyCode == 46){console.log('Delete Key Pressed')};
events - 事件上的奇怪行为(Html.Events.on)
我正在制作一个“流体”文本区域，它根据内容调整其高度。我实际上正在尝试实现 this脚本。我有以下代码:https://ellie-app.com/Vjtvm6yrKWa1/4 问题是，当增加高度时，
events - 拉斐尔JS : how to remove events?
我使用 Raphael .mouseover() 和 .mouseout() 事件来突出显示 SVG 中的某些元素。这工作正常，但在我单击一个元素后，我希望它停止突出显示。在 Raphael doc
events - 重复 "Events"(日历)
我目前正在开发一个应用程序，允许人们为在线广播电台安排“节目”。我希望用户能够设置重复事件，例如:- “躁狂星期一”节目 - 每周一 9 点至 11 点“月中疯狂” - 每个月的第二个星期四“本月新
mysql - SQL硬查询: events between other events
我有以下三个表格(简化版本): 已加载关卡: id(整数、主键、自动增量) globalId(整数，键) 日期(日期时间、键) serverId(Int，键) gamemodeId(Int，Key)
python gevent.event.Event
在我阅读 Gevent Tutorial 之后，我有一个关于 gevent.event.Event 的问题。 Event.set() 是否会唤醒所有被 Event.wait() 阻塞的函数？就像下面
php - UsersController::beforeFilter() 的声明应该与 AppController::beforeFilter(Cake\Event\Event $event) 兼容
我对 cakephp ver3.1.3 没有经验我按照说明实现了登录认证功能； http://book.cakephp.org/3.0/en/tutorials-and-examples/blog-
android - "CleverTap"Can 't see "Event Property"filter in Filter by event property in some events
现在，我发送 10 个事件，每个事件有 1 个属性。但是当我想过滤特定事件并按属性选择事件时，在“事件属性”过滤器中仅显示前 7 个事件，而我为其余事件添加的事件仅显示“第一次”过滤器，为什么？最佳
asp.net - FireFox 和 javascript 问题(event.keyCode 或 event.charCode 或 event.which 不起作用)
我不知道我的 Firefox 发生了什么! 我的aspx和javascript代码是这样的: function a() { alert(
clojure - Re-frame 中的 reg-event-db、reg-event-fx 和 reg-event-ctx 有什么区别？
中有3个事件fns重装，我可以对两者做同样的事情 reg-event-db和 reg-event-fx . reg-event-db之间的主要区别是什么, reg-event-fx和 reg-eve
javascript - event.keycode 与 event.which
我遇到了 Firefox keydown 行为，因为在没有聚焦于特定字段的情况下按下 Enter 键(实际上是任何键)不会触发 keydown 事件只会触发`按键事件。这可能会非常令人困惑，因为 k
events - 如何在 UML 类图中表示 "event"？
这是我的代码片段 public class Notation : INotifyPropertyChanged { public event PropertyChangedEventHandl
events - 多个 tags
我可以在一个 Jsf2 xhtml 文件中有多个标签吗？在那种情况下，关联的监听器将以什么顺序被调用？ Mojarra 2.1.1/Apache Tomcat 7.0.22/PrimeFaces 3
events - 多个 tags
我可以在一个 Jsf2 xhtml 文件中有多个标签吗？在那种情况下，关联的监听器将以什么顺序被调用？ Mojarra 2.1.1/Apache Tomcat 7.0.22/PrimeFaces 3
events - jQuery event.stopPropagation 不适用于
我有以下 JavaScript: $('#ge-display').click(function (event) { window.open('/googleearth/ge-display.ph
events - 我可以将哪些属性与 event.target 一起使用？
我需要确定触发事件的元素。使用 event.target 获取相应的元素。我可以从那里使用哪些属性？引用编号节点名我找不到关于它的大量信息，即使在 jQuery 上也是如此页，所以希望有人
Faster version of 'pygame.event.get()'. Why are events being missed and why are the events delayed?(更快版本的‘pygame.vent.get()’。为什么错过了比赛，为什么比赛被推迟了？)
我在pyGame中创建了一个Asteroidz克隆，并在pygame.vent.get()循环中有两个for Event，一个用于检查退出请求，以及游戏是否应该通过按空格键开始，然后在游戏中进一步尝试

首页

博学

6Ren·AI

商城

javascript - 你如何解释 d3 event.x 和 event.y 坐标？