SVG 圈没有很好地注册鼠标悬停

svg circle not registering mouseover very well

本文关键字：注册 鼠标 悬停 很好 SVG      更新时间：2023-09-26

我有一个具有缩放功能的 d3 地图，其中有代表各个城市的圆圈。由于某种原因，当我将鼠标悬停在圆圈上时（鼠标悬停会显示工具提示，单击会显示一些行），很难让它注册。它似乎只在圆圈的边界附近注册，而不是整个形状，但我还没有找到可识别的图案。这是我的相关代码：

.CSS：

circle {
  stroke-width: 1.5px;
  stroke: "green";
  cursor: pointer;
}

Javascript：

var node = g.selectAll(".node")
    .data(data.nodes)
    .enter()
    .append("circle")
    .attr("cx", function(d) {
        return projection([-1 * d.lon, -1 * d.lat])[0];
    })
    .attr("cy", function(d) {
        return projection([-1 * d.lon, -1 * d.lat])[1];
    })
    .attr("r", 3)
    .style("fill", function(d) {
        return line_color([Math.floor(d.diversity * num_lines)])
    })
    .style("stroke", "#000000")
    .style("stroke-width", "0.05px")
    .on('mouseover', tip.show)
    .on("click", fade(0))
    .on('mouseout', tip.hide);

这是在行动，以证明问题

我同意@BenLyall的观点，因为在圆圈之后绘制链接是导致问题的原因。在 SVG 中，深度由元素的绘制顺序控制。但是，更简单的解决方案是使链接忽略指针事件。尝试向链接添加.style("pointer-events", "none")。我使用您提供的链接中的开发人员工具做到了这一点，并且一旦您移动到圆圈上，就会显示工具提示。

您的链接是在节点之后绘制的，这意味着它们位于节点的"顶部"。 指针事件没有进入圆圈，因为链接掩盖了它。

在你的代码中，你有

    var data = d3.json("data/city_data.json", function(error, data) {
    var num_lines = data.links.length;
    var line_color = d3.scale.sqrt().domain([0, num_lines]).range(["#99CCFF", "#000066"]); //scale color by sqrt to seperate it out
    var node = g.selectAll(".node")
        .data(data.nodes)
        .enter()
        .append("circle")
        .attr("cx", function(d) {
            return projection([-1 * d.lon, -1 * d.lat])[0];
        })
        .attr("cy", function(d) {
            return projection([-1 * d.lon, -1 * d.lat])[1];
        })
        .attr("r", 3)
        .style("fill", function(d) {
            return line_color([Math.floor(d.diversity * num_lines)])
        })
        .style("stroke", "#000000")
        .style("stroke-width", "0.05px")
        .on('mouseover', tip.show)
        .on("click", fade(0))
        .on('mouseout', tip.hide);
    var link = g.selectAll(".link")
        .data(data.links)
        .enter()
        .append("line")
        .attr("class", "link")
        .style("stroke-opacity", 0)
        .style("stroke", function(d) {
            return line_color([Math.floor(d.nlp_1 * num_lines)]);
        })
        .style("stroke-width", 1);
    link.attr("x1", function(d) {
            source_node = data.nodes[d.source];
            return projection([-1 * source_node.lon, -1 * source_node.lat])[0];
        })
        .attr("y1", function(d) {
            source_node = data.nodes[d.source];
            return projection([-1 * source_node.lon, -1 * source_node.lat])[1];
        })
        .attr("x2", function(d) {
            target_node = data.nodes[d.target];
            return projection([-1 * target_node.lon, -1 * target_node.lat])[0];
        })
        .attr("y2", function(d) {
            target_node = data.nodes[d.target];
            return projection([-1 * target_node.lon, -1 * target_node.lat])[1];
        });

尝试执行以下操作：

var data = d3.json("data/city_data.json", function(error, data) {
    var num_lines = data.links.length;
    var line_color = d3.scale.sqrt().domain([0, num_lines]).range(["#99CCFF", "#000066"]); //scale color by sqrt to seperate it out
    var link = g.selectAll(".link")
        .data(data.links)
        .enter()
        .append("line")
        .attr("class", "link")
        .style("stroke-opacity", 0)
        .style("stroke", function(d) {
            return line_color([Math.floor(d.nlp_1 * num_lines)]);
        })
        .style("stroke-width", 1);
    link.attr("x1", function(d) {
            source_node = data.nodes[d.source];
            return projection([-1 * source_node.lon, -1 * source_node.lat])[0];
        })
        .attr("y1", function(d) {
            source_node = data.nodes[d.source];
            return projection([-1 * source_node.lon, -1 * source_node.lat])[1];
        })
        .attr("x2", function(d) {
            target_node = data.nodes[d.target];
            return projection([-1 * target_node.lon, -1 * target_node.lat])[0];
        })
        .attr("y2", function(d) {
            target_node = data.nodes[d.target];
            return projection([-1 * target_node.lon, -1 * target_node.lat])[1];
        });
    var node = g.selectAll(".node")
        .data(data.nodes)
        .enter()
        .append("circle")
        .attr("cx", function(d) {
            return projection([-1 * d.lon, -1 * d.lat])[0];
        })
        .attr("cy", function(d) {
            return projection([-1 * d.lon, -1 * d.lat])[1];
        })
        .attr("r", 3)
        .style("fill", function(d) {
            return line_color([Math.floor(d.diversity * num_lines)])
        })
        .style("stroke", "#000000")
        .style("stroke-width", "0.05px")
        .on('mouseover', tip.show)
        .on("click", fade(0))
        .on('mouseout', tip.hide);

您在 SVG 中最后绘制的项目将位于顶部。 这样做的好处是可以整理可视化，因此链接的端点位于节点下方，使其看起来更整洁。

将.style("pointer-events", "all")添加到圆圈中。默认设置是仅将鼠标悬停在可见的内容上，但无论是否渲染，您都希望在内部显示任何内容。

这是一个显示它工作的小提琴

相关文章：