d3ズームの動作がmousemoveイベントによって上書きされる

Question

私は同じsvgでsvgのd3.jsズーム動作を実装しています。マウスカーソルの位置に従うツールヒントの位置を設定できるように、マウス座標をキャプチャする必要もあります。

問題は、私の 'mousemove'イベントがd3.jsズーム動作をオーバーライドしていることです。 'mousemove'イベントを追加すると、ズーム動作が停止します。

「mousemove」イベントまたは「zoom」イベントがありますが、両方ではありません。これを回避する方法はありますか？ありがとう。

// 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); 

注：スクロール変更されたマウスの位置とtooltipNodeは、マウスから分離されていたバグがあったので、私もlayerXとlayerYにclientXとclientYを変更しました。イベント処理コードがd3によって処理されるように変更されたことに加えて。