Question

我试图对SVG平面图进行平移和缩放的概念验证，并且还能够将标记置于顶部。当缩放/平移发生时，标记不会保持在原位。我理解为什么会发生这种情况但不确定在平移/缩放时保持标记就位的最佳方法。

下面是代码：

    var svg = d3.select(".floorplan")
  .attr("width", "100%")
  .attr("height", "100%")
  .call(d3.zoom().on("zoom", zoomed))
  .select("g")

  var marker = d3.selectAll(".marker")
    .call(d3.drag()
      .on("start", dragstarted)
      .on("drag", dragged)
      .on("end", dragended)
    )


  function zoomed() {
    svg.attr("transform", d3.event.transform);
  }

  function dragstarted(d) {
    console.log('dragstarted');
  }

  function dragged(d) {
    var x = d3.event.x;
    var y = d3.event.y;

    d3.select(this).attr("transform", "translate(" + x + "," + y + ")");
  }

  function dragended(d) {
    console.log('drag ended: marker:'+ d3.select(this).attr('data-id') + ' position: ' + d3.event.x +', ' + d3.event.y);
  }

Theres也是一个可视化看到的代码：https://codepen.io/danielhoff/pen/WzQbRr

我还有一个额外的限制因素，标记元素不应该包含在平面图svg中。

Answer 1

以下是您的codepen的修改版本，在拖动事件期间修复标记的移动，同时将标记保持在平面图svg容器之外：

https://codepen.io/xavierguihot/pen/OvyRPY?editors=0010

要回到上下文中，一个简单的解决方案就是将标记元素包含在平面布局容器内（为了使标记获得与平面布置图相同的缩放事件），但是在这里我们希望标记位于它自己的svg容器。

并不简单！

在html标签中包含id的公寓（为了从html中选择这些元素），只有javascript部分已被修改。

让我们深入了解达到这一点所需的步骤：

首先：让我们修改zoomed函数以应用于标记：

最初这是缩放功能：

function zoomed() {
  svg.attr("transform", d3.event.transform);
}

修改后的版本：

function zoomed() {

  // Before zooming the floor, let's find the previous scale of the floor:
  var curFloor = document.getElementById('floorplan');
  var curFloorScale = 1;
  if (curFloor.getAttribute("transform")) {
    var curFloorTransf = getTransformation(curFloor.getAttribute("transform"));
    curFloorScale = curFloorTransf.scaleX;
  }

  // Let's apply the zoom
  svg.attr("transform", d3.event.transform);

  // And let's now find the new scale of the floor:
  var newFloorTransf = getTransformation(curFloor.getAttribute("transform"));
  var newFloorScale = newFloorTransf.scaleX;

  // This way we get the diff of scale applied to the floor, which we'll apply to the marker:
  var dscale = newFloorScale - curFloorScale;

  // Then let's find the current x, y coordinates of the marker:
  var marker = document.getElementById('Layer_1');
  var currentTransf = getTransformation(marker.getAttribute("transform"));
  var currentx = currentTransf.translateX;
  var currenty = currentTransf.translateY;

  // And the position of the mouse:
  var center = d3.mouse(marker);

  // In order to find out the distance between the mouse and the marker:
  // (43 is based on the size of the marker)
  var dx = currentx - center[0] + 43;
  var dy = currenty - center[1];

  // Which allows us to find out the exact place of the new x, y coordinates of the marker after the zoom:
  // 38.5 and 39.8 comes from the ratio between the size of the floor container and the marker container.
  // "/2" comes (I think) from the fact that the floor container is initially translated at the center of the screen:
  var newx = currentx + dx * dscale / (38.5/2);
  var newy = currenty + dy * dscale / (39.8/2);

  // And we can finally apply the translation/scale of the marker!:
  d3.selectAll(".marker").attr("transform", "translate(" + newx + "," + newy + ") scale(" + d3.event.transform.k + ")");
}

这大量使用getTransformation函数，该函数允许检索元素的当前变换细节。

然后：但现在，在缩放后，当我们拖动标记时，它会恢复原始尺寸：

这意味着我们必须调整标记的dragg函数以在应用拖动变换时保持其当前比例：

这是初始拖动功能：

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

及其修改版本：

function draggedMarker(d) {

  var x = d3.event.x;
  var y = d3.event.y;

  // As we want to keep the same current scale of the marker during the transform, let's find out the current scale of the marker:
  var marker = document.getElementById('Layer_1');
  var curScale = 1;
  if (marker.getAttribute("transform")) {
    curScale = getTransformation(marker.getAttribute("transform")).scaleX;
  }

  // We can thus apply the translate And keep the current scale:
  d3.select(this).attr("transform", "translate(" + x + "," + y + "), scale(" + curScale + ")");
}

最后：当拖动地板时，我们还必须相应地拖动标记：

因此我们必须覆盖默认的地板拖动，以便将相同的dragg事件包含在标记中。

这是应用于地板的拖动功能：

function draggedFloor(d) {

  // Overriding the floor drag to do the exact same thing as the default drag behaviour^^:

  var dx = d3.event.dx;
  var dy = d3.event.dy;

  var curFloor = document.getElementById('svg-floor');
  var curScale = 1;
  var curx = 0;
  var cury = 0;
  if (curFloor.getAttribute("transform")) {
    curScale = getTransformation(curFloor.getAttribute("transform")).scaleX;
    curx = getTransformation(curFloor.getAttribute("transform")).translateX;
    cury = getTransformation(curFloor.getAttribute("transform")).translateY;
  }

  d3.select(this).attr("transform", "translate(" + (curx + dx) + "," + (cury + dy) + ")");

  // We had to override the floor drag in order to include in the same method the drag of the marker:

  var marker = document.getElementById('Layer_1');
  var currentTransf = getTransformation(marker.getAttribute("transform"));

  var currentx = currentTransf.translateX;
  var currenty = currentTransf.translateY;
  var currentScale = currentTransf.scaleX;

  d3.selectAll(".marker").attr("transform", "translate(" + (currentx + dx) + "," + (currenty + dy) + ") scale(" + currentScale + ")");
}

D3：在平移和缩放时保持SVG的相对位置

1 个答案: