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*/}));

感谢将">

指针事件"设置为"全部"后缩放正在工作，但是拖动行为仅适用于拖动"开始"那里缺少什么吗？

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*/}));

Answer 1

代码的问题在于 SVG 的默认指针事件，其中：

仅当可见性属性设置为可见且鼠标光标位于元素的内部(即"fill")上并且填充属性设置为">

none"以外的值时，或者当鼠标光标位于元素的周长(即"stroke")上并且 stroke 属性设置为非 none 的值时，元素才能成为鼠标事件的目标。(强调我的)

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

取而代之的是，只需将指针事件设置为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>

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>