d3js манипуляторы масштабирования событий не срабатывают должным образом

Question

Я использую функцию d3.zoom() в d3 версии 4.2.8 для перемещения по диаграмме силы. Я хочу, чтобы указатель мыши изменился на курсор перемещения, пока я «перетаскиваю себя» над диаграммой. Как только я отпустил кнопку мыши, он должен вернуться к «перекрестину».

Я использовал два консольных журнала, чтобы увидеть, когда происходят события. В консоли он работает: Когда я нажимаю и удерживаю кнопку мыши, он говорит «Zoom begin», и как только я покидаю его, он говорит «Zoom finish».

Единственное, что не работает, - это изменение курсора на «перемещение»: хотя консоль говорит «Начало зума», курсор остается «по умолчанию». Он изменится только на «перемещение» после того, как я покину кнопку мыши (а затем сразу же перейду к «перекрестину», так как «Zoom finish» срабатывает).

Почему консоль печатает сообщение в нужное время, но курсор меняется после того, как я снова покинул кнопку мыши?

// 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 , если у меня нет инструментов для разработчиков open. Если инструменты разработчика открыты, он делает то, что вы описываете. Там есть настоящий старый отчет об ошибке here, описывающий все детали gory.

код, потому что я не могу писать без него :)

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

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