D3 Clippath 鼠标悬停事件不起作用答案

【问题标题】：D3 Clippath Mouseover event not workingD3 Clippath 鼠标悬停事件不起作用
【发布时间】：2015-10-18 05:37:07
【问题描述】：

向导，

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

我的目标是提醒悬停元素的用户 ID（示例中的 1、2 或 3 -“点”表中的第 4 个元素）。

我已将其加载到 jsfiddle 中：

有人可以让它发挥作用 - 或提出另一种实现相同目标的方法吗？

HTML：

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

JS：

var size = 30,
    w = 400,
    h = 300,
    dots = [];

dots.push([101, 200, 0, 1, 1]);
dots.push([170, 120, 0, 2, 1]);
dots.push([210, 150, 0, 3, 1]);

var svg = d3.select(".projectbounds")
    .append("svg:svg")
    .attr("id", "robsvg")
    .attr("width", w)
    .attr("height", h)
    .style("cursor", "pointer");

var defs = svg.append("svg:defs");

var imgbg = svg.append('svg:image')
    .attr('xlink:href', 'http://www.empireonline.com/images/features/100greatestcharacters/photos/7.jpg')
    .attr('x', 0)
    .attr('y', 0)
    .attr('width', w)
    .attr('height', h)
    .attr('clip-path', 'url(#robclip)');

var robs = defs.append("svg:clipPath").attr("id", "robclip");

function redraw() {
    for (var d in dots) {
        robs.append("circle")
            .attr("class", function () {
                return "userid" + dots[d][4] + " bgtier" + dots[d][3];
            })
            .attr("cx", function () {
                return dots[d][0];
            })
            .attr("cy", function () {
                return dots[d][1];
            })
            .attr("r", size + 1)
            .attr("onmouseover", function() { ////// not triggering...
                return "alertid()"; ////// not triggering...
            });
    }
}

function alertid(){ 
    alert("hi");
}

redraw();

我已将其加载到 jsfiddle 中：

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

有人可以帮忙吗？

【问题讨论】：

标签： javascript jquery d3.js clip clip-path

【解决方案1】：

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

我为此创建了一个单独的函数：

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()；

【讨论】：