d3.js - d3 v6 指针函数未调整缩放和平移

Question

我正在将我的应用程序从 d3 v5 升级到 v6，并且在迁移 d3.mouse 功能时遇到问题。在我的应用程序中，我将转换应用于顶级 svg 组，并使用缩放功能进行缩放和平移(缩放和平移)。当我双击屏幕时，我会选择鼠标位置并绘制一个正方形。
现在我用 d3.pointer 替换 d3.mouse 函数。在我的双击事件中，我通过调用 d3.pointer(event) 获得鼠标位置.但是，此函数不会产生相对于我的顶级 svg 组的定位和缩放位置的位置。当我从顶级组中删除平移和缩放时，位置匹配。
在旧版本的 d3 中，我可以调用 d3.mouse(this.state.svg.node())它会产生我点击的精确位置，以进行平移和缩放。这在版本 6 中可用吗？如果没有，是否有一种干净的方法可以对此进行调整？新的事件对象带有许多不同的位置属性:pagex、offsetx、screenx、x。这些都没有产生我点击的位置。有没有一种干净的方法来实现这一点？

Answer 1

您可以指定一个容器元素，该元素将考虑 v5 及更早版本中的缩放转换:

d3.mouse(container)

Returns the x and y coordinates of the current event relative to the specified container. The container may be an HTML or SVG container element, such as a G element or an SVG element. The coordinates are returned as a two-element array of numbers [x, y]. (source)

在 d3v6 中，您可以使用 d3.pointer 的第二个参数来指定:

d3.pointer(event[, target])

Returns a two-element array of numbers [x, y] representing the coordinates of the specified event relative to the specified target. event can be a MouseEvent, a PointerEvent, a Touch, or a custom event holding a UIEvent as event.sourceEvent....If the target is an SVG element, the event’s coordinates are transformed using the inverse of the screen coordinate transformation matrix. If the target is an HTML element, the event’s coordinates are translated relative to the top-left corner of the target’s bounding client rectangle. (source)

据我所知，您应该使用:

d3.pointer(event,this.state.svg.node());

代替

d3.mouse(this.state.svg.node());

这是一个 d3v6 示例:

var svg = d3.select("body")
  .append("svg")
  .attr("width", 500)
  .attr("height", 200);
  
var rect = svg.append("rect")
 .attr("width",500)
 .attr("height",200)
 .attr("fill", "#eee")
 
var g = svg.append("g");
  
var zoomed = function(event) {
  g.attr("transform", event.transform);
}

rect.call(d3.zoom().on("zoom",zoomed))
 .on("click", function(event) {
    var xy = d3.pointer(event,g.node());
    
    g.append("circle")
      .attr("r", 5)
      .attr("cx", xy[0])
      .attr("cy", xy[1])
      .attr("fill","crimson");
 })

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

改编这个 v5 示例:

var svg = d3.select("body")
  .append("svg")
  .attr("width", 500)
  .attr("height", 200);
  
var rect = svg.append("rect")
 .attr("width",500)
 .attr("height",200)
 .attr("fill", "#eee")
 
var g = svg.append("g");
  
var zoomed = function() {
  g.attr("transform", d3.event.transform);
}

rect.call(d3.zoom().on("zoom",zoomed))
 .on("click", function() {
    var xy = d3.mouse(g.node());
    
    g.append("circle")
      .attr("r", 5)
      .attr("cx", xy[0])
      .attr("cy", xy[1])
      .attr("fill","crimson");
 })

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