javascript - 当光标位于内部 svg 元素上时，d3-zoom 会中断

Question

我按照这个简短的教程实现了 d3-zoom 。

我正在使用https://d3js.org/d3.v5.min.js。这是我第一个使用 d3 的项目。

我的目标是制作一种平面图，展示会场的展位桌。与本教程类似，我从数组中绘制了形状元素。就我而言，我已将一组展位信息输入到元素网格中。

缩放功能工作得很好，除非我的光标在我的一个矩形的边框或填充上，或者在元素的文本上。如果我的光标点触及这些元素中的任何一个，则缩放行为将停止工作。

尝试使用鼠标滚轮进行缩放，将光标置于空白区域，而不是触摸形状或文本。

我试图在某个地方安装一个 console.log 以查看事件中没有传递的内容，但即使找到我可以获取事件参数的位置也遇到了麻烦。

非常感谢任何帮助！这是我的代码：

var svg = d3.select("#venue-svg"); // this is my svg element

// the zoom rectangle. from the tutorial: 'The zoom behavior is applied 
// to an invisible rect overlaying the SVG element; this ensures that it 
// receives input, and that the pointer coordinates are not affected by 
// the zoom behavior’s transform.'

svg.append("rect")
  .attr("width", "100%")
  .attr("height", "100%")
  .style("fill", "none")
  .style("pointer-events", "all")
  .call(
    d3
      .zoom()
      .scaleExtent([1 / 2, 4])
      .on("zoom", zoomed)
  );

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

// a parent <g> that holds everything else and is targeted
// for the transform (from the tutorial). 
var g = svg.append("g");

// the groups that hold each booth table, associated org name, etc.
var tables = g
  .selectAll("g")
  .data(venueBooths)
  .enter()
  .append("g")
  .attr("transform", function(d) {
    return "translate(" + d.x + " " + d.y + ")";
  });

var tableRects = tables
  .append("rect")
  .attr("stroke", "steelblue")
  .attr("stroke-width", "2px")
  .attr("width", function(d) {
    return d.w;
  })
  .attr("height", function(d) {
    return d.h;
  })
  .attr("fill", "none")
  .attr("fill", function(d) {
    return $.isEmptyObject(d.reservation) ? "none" : "#FF5733";
  })
  .attr("id", function(d) {
    return "table-" + d.id;
  });

tables
  .append("text")
  .text(function(d) {
    return "Booth " + d.id;
  })
  .attr("dx", 5)
  .attr("dy", 60)
  .attr("font-size", "8px");

tables
  .append("text")
  .text(function(d) {
    return d.reservation.orgName ? d.reservation.orgName : "Available";
  })
  .attr("dy", 15)
  .attr("dx", 5)
  .attr("font-size", "9px")
  .attr("font-weight", "bold");

标签： javascriptd3.jssvg

Answer 1

最后尝试创建矩形，使 DOM 看起来像这样：

<svg>
    <g></g>
    <rect></rect>
</svg>

由于缩放功能附加到大矩形，因此在其上方创建较小的框可防止缩放事件传播到它们下方的大矩形。它适用于带有 a 的盒子，fill: none;因为它的行为就像一个空心盒子。

尝试将代码修改为：

var svg = d3.select("#venue-svg"); // this is my svg element

// the zoom rectangle. from the tutorial: 'The zoom behavior is applied 
// to an invisible rect overlaying the SVG element; this ensures that it 
// receives input, and that the pointer coordinates are not affected by 
// the zoom behavior’s transform.'

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

// a parent <g> that holds everything else and is targeted
// for the transform (from the tutorial). 
var g = svg.append("g");

// the groups that hold each booth table, associated org name, etc.
var tables = g
  .selectAll("g")
  .data(venueBooths)
  .enter()
  .append("g")
  .attr("transform", function(d) {
    return "translate(" + d.x + " " + d.y + ")";
  });

var tableRects = tables
  .append("rect")
  .attr("stroke", "steelblue")
  .attr("stroke-width", "2px")
  .attr("width", function(d) {
    return d.w;
  })
  .attr("height", function(d) {
    return d.h;
  })
  .attr("fill", "none")
  .attr("fill", function(d) {
    return $.isEmptyObject(d.reservation) ? "none" : "#FF5733";
  })
  .attr("id", function(d) {
    return "table-" + d.id;
  });

tables
  .append("text")
  .text(function(d) {
    return "Booth " + d.id;
  })
  .attr("dx", 5)
  .attr("dy", 60)
  .attr("font-size", "8px");

tables
  .append("text")
  .text(function(d) {
    return d.reservation.orgName ? d.reservation.orgName : "Available";
  })
  .attr("dy", 15)
  .attr("dx", 5)
  .attr("font-size", "9px")
  .attr("font-weight", "bold");

svg.append("rect")
  .attr("width", "100%")
  .attr("height", "100%")
  .style("fill", "none")
  .style("pointer-events", "all")
  .call(
    d3
      .zoom()
      .scaleExtent([1 / 2, 4])
      .on("zoom", zoomed)
  );