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的默认pointer-events，其中包括：

当visibility属性设置为visible并且鼠标光标位于元素的内部（即＆＃39; fill＆＃39;）和fill属性上时，元素只能是鼠标事件的目标设置为除了＆＃39; none＆＃39; 之外的值，或者当鼠标光标位于元素和笔划的周长（即＆＃39; stroke＆＃39;）之上时attribute设置为none以外的值。（强调我的）

但是，我建议你不要将填充设置为transparent（正如other answer中所述），这通常是一个坏主意：尽管有些浏览器支持它，transparent不是SVG规范的一部分。

而不是那样，只需将指针事件设置为visible或all：

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

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

＆＃13;

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")
  }));

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

而不是

.attr("fill","none")

使用

.attr("fill","transparent")

下面的工作代码

＆＃13;

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")
                     }));

＆＃13;

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

＆＃13;

d3 v4变焦事件未触发鼠标滚轮/触摸屏

2 个答案: