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 。如果开发工具是开放的，它会按照您的描述进行操作。有一个关于它的真实的旧bug报告here描述了所有血腥的细节。

代码原因如果没有它，我就无法发帖：）

x <- c(rep(1,8000),rep(2,10000),rep(3,15000), rep(4, 20000), rep(5, 15500), rep(6, 14500), rep(7, 5000))
hist(x, breaks = c(0,1,2,3,4,5,6,7))

d3js zoom eventhandlers没有正确触发事件

1 个答案: