Блог

[[Для этого используется d3 v5 ]]

D3.zoom() автоматически сопоставляет щелчки колесом и мышью с операциями масштабирования карты. Я хотел бы иметь возможность нарисовать прямоугольник в области карты, чтобы выбрать узлы, которые отображаются поверх карты. Мне нужно знать, как добавить обработчики для mousedown, mousemove, mouseup, чтобы я мог отслеживать, где должен быть прямоугольник.

Я пробовал следующее, но обратный вызов mousedown никогда не вызывается.

Если я удалю .call(zoom) , вызывается обратный вызов mousedown, но e есть undefined . Я могу получить доступ к событию с помощью d3.event , так что это не проблема.

Если я перемещаюсь .call(zoom) после .on( вызовов mouse*’, cb)`, я вижу, что мышь опущена, но не наведена, и только одно движение мыши.

Я могу понять, как сначала добавить обратные вызовы мыши, но я не понимаю, почему некоторые из них замаскированы, а другие нет. Очевидно, мне нужна помощь в понимании этого.

         var zoom = d3.zoom()
            .scaleExtent([0.1, 10])
            .filter(() => !d3.event.ctrlKey) // Don't zoom/pan when ctrl is pressed
            .on("zoom", zoomed)
        ;

        container
            .call(zoom)
            .on('mousedown.zoomrect', e=>console.log('zoom', e))
            .on('mouseup.zoomrect', e=>console.log('zoom up', e))
            .on('mousemove.zoomrect', e=>console.log('zoom move', e))
        ; 
  

Расположение узлов в прямоугольнике — это отдельный вопрос, но я считаю, что смогу справиться с проекцией и преобразованиями.