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

#javascript #d3.js

Вопрос:

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

Я использовал два журнала консоли, чтобы увидеть, когда запускаются события. В консоли это работает: когда я нажимаю и удерживаю кнопку мыши, появляется надпись «Zoom begin», и как только я оставляю ее, появляется надпись «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");
}

1. Я попробовал это здесь . У меня работает в IE11 и Edge. Также работает в Chrome, если у меня не открыты инструменты разработчика . Если инструменты разработки открыты, они выполняют то, что вы описываете. Здесь есть очень старый отчет об ошибке .

2. Боже, да, вы правы, это инструменты разработки в Chrome. Это работает в Firefox и Chrome без инструментов разработки. Большое вам спасибо, пожалуйста, не могли бы вы опубликовать свой комментарий в качестве ответа, чтобы я мог пометить его как правильное решение? Спасибо!

Ответ №1:

Как я уже говорил в своих комментариях, я опробовал это здесь. У меня это работает в IE11 и Edge. Это также работает в Chrome, если у меня не открыты инструменты разработчика. Если инструменты разработки открыты, они выполняют то, что вы описываете. Здесь есть очень старый отчет об ошибке, описывающий все кровавые подробности.

Код, потому что я не могу опубликовать без него 🙂

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

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