Question

我在svg上实现d3.js缩放行为，在同一个svg上我还需要捕获鼠标坐标，这样我就可以设置跟随鼠标光标位置的工具提示的位置。

问题在于我的鼠标移动＆＃39;事件已覆盖d3.js缩放行为。随着'mousemove＆＃39;添加事件，缩放行为停止工作。

要么我有＆＃39; mousemove＆＃39;事件或＆＃39;缩放＆＃39;事件，但不是两个。有什么建议如何解决这个问题？感谢。

    // bind zoom behavior
    selection_svg.call(
        d3.behavior.zoom()
        .translate([0, 0])
        .scale(1)
        .scaleExtent([1, 14])
        .on('zoom', ()=>{ selection_plotArea.attr('transform', 'translate('+d3.event.translate+')scale('+d3.event.scale+')'); })
    );

    // tool tip coordinate
    const toolTipNode = selection_toolTip.node();
    toolTipNode.style.position = 'absolute';
    selection_svg.node().addEventListener('mousemove',function(evt){
        const coord_client = {
            x:evt.clientX,
            y:evt.clientY,
        }
        toolTipNode.style.left = `${coord_client.x}px`;
        toolTipNode.style.top = `${coord_client.y}px`;
    }, false);

我已将此问题的代码添加到小提琴中： https://jsfiddle.net/apollotang/rt9t1vdj/

Answer 1

问题似乎与tooltipNode捕获鼠标事件有关。通过向coord_client添加一些偏移，您的问题就会消失。

  selection_svg.on('mousemove', function () {
    const coord_client = {
      x: d3.event.layerX + 10,
      y: d3.event.layerY + 10
    };
    toolTipNode.style.left = `${coord_client.x}px`;
    toolTipNode.style.top = `${coord_client.y}px`;
  }, false);

注意：我还将clientX和clientY更改为layerX和layerY，因为滚动更改鼠标位置时存在错误，{ {1}}将与鼠标分开。此外，事件处理代码已更改为由d3处理。

Answer 2

如果你的svg附有mousemove事件，请确保你没有在mousemove事件中调用d3.event.stopPropagation（），否则你将阻止缩放行为。

鼠标移动事件

2 个答案: