Question

向导

我在clippath上遇到了一些鼠标悬停事件的问题。出于某种原因，它没有触发，我认为这是因为元素正在剪切Dude的图像。

我的目标是提醒用户ID（示例中的1,2或3 - ＆＃34; dot＆＃34;表中的第4个元素）。

我已将它加载到jsfiddle：

有人可以让它发挥作用 - 或建议另一种方法来实现同一目标吗？

HTML：

<button type="button" onClick="onClick1()">Click</button>
<p><a id="button1">0</a>
</p>
<button type="button" onClick="onClick2()">Click</button>
<p><a id="button2">0</a>
</p>
<input type="reset" onclick="reset()"/>

JS：

<div class="projectbounds" style="width:400px; height:300px; background-color:#000000;"></div>

我已将它加载到jsfiddle：

https://jsfiddle.net/vk1jc8ah/4/

有人可以帮忙吗？

Answer 1

Clipaths实际上不是“绘制”元素，如rect，circle等......所以不是将事件监听器放在clipath中的圆形元素上，而是可以为mouseover事件创建相同圆圈的叠加层，并使这些圆圈透明。

我创建了一个单独的函数来执行此操作：

function drawEventCircles() {
    for (var d in dots) {
        svg.append("circle")
            .attr("cx", function () {
                return dots[d][0];
            })
            .attr("cy", function () {
                return dots[d][1];
            })
            .attr("r", size + 1)
            .attr("fill", "transparent")
            .on("mouseover", function() {            
              alertid();
            }
        );
    }
}

然后在调用redraw（）;

之后调用drawEventCircles（）

D3 Clippath Mouseover事件无效

1 个答案: