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

Question

我在 g 元素内附加了一个 svg 容器，然后附加了一个 rect。我可以将 g 元素转换并转换到 position 中，这也定位了 svg 和 rectangle。 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 + ")";})   
  }

Answer 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坐标。拖动是相对于此的 - 向右一个像素是 d.x+1，无论 mousedown 事件在哪里。因此，如果您从不更新基准，则每个新的拖动事件都将相对于初始起点。

如果你想要拖动后的屏幕位置，那就是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 坐标中的位置 space

也可能有用。

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

How to find x position of a combined g /svg element after drag

drag

observable

d3.js