d3 v4缩放事件在鼠标滚动/触摸屏上无法触发

Question

我最近迁移到了D3 v4.10.2。根据文档的指示，我调用了缩放行为，但是当使用鼠标滚轮或触摸屏进行缩放时，回调没有被执行。我正在使用最新版本的Chrome浏览器：

 var some_svg = d3.select('body').select("#some-svg");
 var some_svg_rect =  some_svg.append("g").append("rect")
                                          .attr("fill","none")
                                          .attr("width",900)
                                          .attr("height",400);
 some_svg_rect.call(d3.zoom()
                     .on("zoom", function () {/*this code fails to execute*/}));

感谢您设置“pointer-events”为“all”，缩放功能已经可以正常使用了。但是拖动行为只在开始拖动时起作用，是否有什么遗漏？

some_svg_rect.call(d3.drag()
               .on("start", function () {/*this code works*/}) 
               .on("drag", function () {/*this code fails toexecute*/}) 
               .on("end", function () {/*this code fails to execute*/}));

- rigger12

Answer 1

您的代码问题在于SVG的默认pointer-events，其中：

只有当visibility属性设置为visible且鼠标光标位于元素内部（即“fill”）并且fill属性设置为非“none”值时，该元素才能成为鼠标事件的目标，或者当鼠标光标位于元素周围（即“stroke”）时，stroke属性设置为非none值。（强调是我的）

然而，我建议您不要将填充设置为transparent（如其他答案中建议的那样），这通常是一个坏主意：尽管一些浏览器支持它，但transparent不是SVG规范的一部分。

相反，只需将pointer-events设置为visible或all：

.attr("pointer-events", "all")

这是一个示例（无耻地复制了其他答案的代码）

var some_svg = d3.select('body').select("#some-svg");
var some_svg_rect = some_svg.append("g").append("rect")
  .attr("fill", "none")
  .attr("pointer-events", "all")
  .attr("width", 400)
  .attr("height", 250);
some_svg_rect.call(d3.zoom()
  .on("zoom", function() {
    console.log("zoom works")
  }));

.as-console-wrapper { max-height: 20% !important;}
svg{
  border: 1px solid gray;
}

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg id="some-svg" width=400 height=250></svg>

- Gerardo Furtado

---

谢谢！这个有效。另一个问题是拖动行为只在拖动“开始”时起作用。有什么遗漏吗？我把代码放在原来的问题中了。 - rigger12

既然这个问题与填充问题无关，最好的办法是发布另一个问题。请不要编辑您的帖子以提出后续问题，而是发布新的问题。 - Gerardo Furtado

Answer 2

不要使用

.attr("fill","none")

而是使用

.attr("fill","transparent")

下面是可用的代码

var some_svg = d3.select('body').select("#some-svg");
 var some_svg_rect =  some_svg.append("g").append("rect")
                                          .attr("fill","transparent")
                                          .attr("width",900)
                                          .attr("height",400);
 some_svg_rect.call(d3.zoom()
                     .on("zoom", function () {
                     console.log("hi")
                     }));

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg id="some-svg" width=1000 height=2000></svg>

- Cyril Cherian