javascript - d3js 缩放事件处理程序未正确触发事件

Question

我正在使用 d3 版本 4.2.8 中的 d3.zoom() 函数在力图上移动。我希望鼠标指针更改为移动光标，只要我在图表上“拖动自己”即可。一旦我松开鼠标按钮，它就应该变回“十字准线”。

我使用了两个控制台日志来查看事件何时被触发。在控制台中它可以工作:当我单击并按住鼠标按钮时，它会显示“缩放开始”，一旦我离开它，它就会显示“缩放完成”。

唯一不起作用的是将光标更改为“移动”:虽然控制台显示“缩放开始”，但光标仍保持在“默认”位置。只有在我离开鼠标按钮后，它才会更改为“移动”(然后由于“缩放完成”触发而立即更改为“十字准线”)。

为什么控制台在正确的时间打印了消息，但是当我再次离开鼠标按钮后光标发生了变化？

// Prepare Zoom and Panning settings
var zoom = d3.zoom()
    .scaleExtent([.1, 10])
    .on("start", zoomBegin)
    .on("end", zoomFinish)
    .on("zoom", zoomed);

// View is needed as the new D3V4 zoom cannot be applied directly on the SVG but a group element    
var view = svg.append("g");

svg.call(zoom)
    //prevent triggering the zoom on dblclicks
    .on("dblclick.zoom", null);

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

function zoomBegin() {
    console.log("Zoom begin");
    body.style("cursor", "move");
}

function zoomFinish() {
    console.log("Zoom finish"); 
    //body.style("cursor", "crosshair");
}

Answer 1

正如我在评论中所说，我尝试了这个 here 。它适用于 IE11 和 Edge。如果我没有打开开发者工具，它也可以在 Chrome 中使用。如果开发工具打开，它将执行您所描述的操作。有一个关于它的真正的旧错误报告 here描述所有血淋淋的细节。

代码，因为没有它我就无法发布:)

function zoomBegin() {
  console.log("Zoom begin");
  svg.style("cursor", "move");
}

function zoomFinish() {
  console.log("Zoom finish");
  svg.style("cursor", "auto");
}