d3.on（「mouseover」）事件不適用於嵌套的SVG元素

我有一組嵌套的元素（SVG）。根元素是圖形，子元素是圖形中的元素（線，軸等）。簡化的例子：d3.on（「mouseover」）事件不適用於嵌套的SVG元素

<g transform="translate(80,10)" id="mainGraph"> 
    <g class="Line"> 
     <path d="....."></path> 
    </g> 
</g>

我的問題是，如果我結合鼠標懸停/ mousemove事件（與D3.on（「鼠標懸停」）例如）到mainGraph元件，它只有當我將鼠標移動到一個觸發的子元素。

我讀過的一件事是後面的元素有優先權，所以我給所有的子元素添加了.style（「pointer-events」，「none」），但那不起作用。

來源

2013-07-05 user2279929

一種方法是添加一個矩形填充整個表面作爲第一元件以捕獲不被後添加元素捕獲鼠標事件：

something.append('svg:rect') 
    .attr('width', width) // the whole width of g/svg 
    .attr('height', height) // the whole heigh of g/svg 
    .attr('fill', 'none') 
    .attr('pointer-events', 'all') 
    .on('mouseover', function() { 
     // do something 
    }  
    });

相信<g>元件（mainGraph在您的示例）只是一個容器，而不是一個可以接收鼠標事件的實際形狀。

您可能可以在svg元素本身添加鼠標事件偵聽器，但我不認爲<g>可以工作。

來源

2013-07-05 19:06:46 explunit

使用'g'如果明確設置它的尺寸應該工作。 –

'g'元素（不像'div'）只是一個沒有形狀的容器，所以沒有尺寸。因此，如果您希望將鼠標懸停應用於矩形區域，則需要指定矩形內容，例如「rect」。然而，一個有用的改進是使用fill：none和pointer-events：所有樣式。 – mbostock

@mbostock如果直接在元素上使用指針事件與在CSS屬性中設置它有什麼不同？ ''''g'''中的''''''''''元素的行爲方式是否相同？ – amenadiel

除了使用rect元素之外，它還應該具有像這樣的pointer-events: all;這樣的CSS屬性，以便觸發事件。

來源

2016-05-14 01:00:58 Ketan

是的，設置'指針事件'是關鍵，不管它是否嵌套。默認值將使其僅接受「visiblePainted」時的事件，請參閱https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events。 – Felix

我也面臨同樣的問題。
的解決方案是將CSS屬性添加到父元素

pointer-events: stroke;

或

pointer-events: visibleStroke;

來源

2017-12-08 11:13:35

d3.on（「mouseover」）事件不適用於嵌套的SVG元素

回答

相關問題