拖动后如何找到组合 g / svg 元素的 x 位置答案

【问题标题】：How to find x position of a combined g /svg element after drag拖动后如何找到组合 g / svg 元素的 x 位置
【发布时间】：2021-03-21 16:37:30
【问题描述】：

我在 g 元素中添加了一个 svg 容器，然后添加了一个矩形。我可以将 g 元素转换并转换为位置，该位置也可以定位 svg 和矩形。 g 元素具有拖动功能，但用于拖动的 event.x 始终从 0 开始，然后为向左拖动为负数。如何访问 g 元素的 .attr("x") ？我需要找到 g 元素开始的屏幕位置以传递给另一个函数。

我添加g元素如下：

  .join(function (group) {
        var gEnter = group.append("g")
         .attr("class", "rectangles")
         .append("svg")
         .attr("class", "container"); 
        ...

我定位我的g 元素并像这样调用拖动函数：

   svg.selectAll(".rectangles")
       .attr("transform", function (d, i) {return "translate(" + d.x + "," + d.y + ")";})
       ...
       .call(d3.drag().on("dragged", dragged)...);

然后我在那些g 元素上调用拖动函数并在拖动函数中更新该位置：

function dragged(event, d) {
    d3.select(this).attr("transform", function (d, i) {return "translate(" + event.x + "," + event.y + ")";})   
  }

【问题讨论】：

你的拖动功能是什么样的以及如何定位原始 g？
我在这里创建了一个示例observablehq.com/@steve-pegg/… 这里的问题是当一个矩形被多次拖动时，拖动总是从原始坐标而不是矩形当前位置开始。这可以解决吗？

标签： d3.js observable drag

【解决方案1】：

您没有更新数据以反映新位置。您需要更新 d.x 和 d.y：

function dragged(event, d) {
    d.x = event.x; d.y = event.y; // update the datum.
    d3.select(this).attr("transform", function (d, i) {return "translate(" + event.x + "," + event.y + ")";})   
  }

默认情况下，拖动对象为基准面，使用d.x和d.y表示被拖动物体的x,y坐标。拖动与此相关 - 无论 mousedown 事件在哪里，右一个像素都是 d.x+1。因此，如果您从不更新基准，则每个新的拖动事件都将相对于初始起点。

如果您想要拖动后的屏幕位置，即d.x 和d.y，如果您在整个拖动过程中更新基准：

var svg  = d3.select("svg");

var circle = svg.append("circle")
  .datum({x: 100, y:100})
  .attr("r", 10)
  .attr("transform", function(d) { return "translate("+[d.x,d.y]+")"; })
  .call(d3.drag().on("drag", function(event,d) {
    d.x = event.x, d.y = event.y;
    d3.select(this).attr("transform", function(d) { return "translate("+[d.x,d.y]+")"; });
    console.log("x: ", d.x);
  }))

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/6.2.0/d3.min.js"></script>
<svg><svg>

注意d不一定持有屏幕位置，而是SVG坐标空间中的位置

This 也可能有用。

【讨论】：

完美。谢谢。