操纵鼠标悬停在d3.js中的“击打区域” [英] manipulate mouseover "hit area"in d3.js

问题描述

我想鼠标悬停 / 鼠标悬停时，显示和隐藏 SVG中的节点是我的节点内部的形状是一个只有1.5px宽度的路径，所以在鼠标悬停事件中不容易碰到那个区域，这对用户体验来说是不方便的。

I'd like to show and hide a node in SVG when mouseover / mouseout, the issue is that my shape inside the node is a path with only 1.5px width so is not easy to hit that area in the mouseover event, that's definitely inconvenient to user experience.

我想知道是否有一种方法可以让打击区域更宽，使用任意宽度，但对用户不可见。

I'd like to know if there's a way to make that hit area wider using an arbitrary width, but invisible to the user?

a我的代码片段：

link.enter()
    .append('g').attr('class', 'link')
    .append('line')
    .attr('class', 'path')
    .attr('marker-end', function(d, i) {
        if (i === 2) {
            return 'url(#arrow)';
        } else {
            return null;
        }
    }).on('mouseover', function(d) {
        //alert(JSON.stringify(d));
        alert('mouseover');
    }).on('mouseout', function(d) {
        alert('mouseout');
    });

css：

.node .path {
  stroke: #878f8f;
  stroke-width: 1.5px;
  fill:none;
}

推荐答案

c / c $ c>到 g ，使用透明笔触和大笔触宽度，这将增加命中区域。

You can add another line to the g with transparent stroke and with large stroke-width, which will increase the hit area.

// Subscribe to mouse events on the entire g
gEnter = link.enter()
    .append('g')
    .attr('class', 'link')
    .on('mouseover', function(d) {
        //alert(JSON.stringify(d));
        alert('mouseover');
    }).on('mouseout', function(d) {
        alert('mouseout');
    });

// Instead of 1 line, append 2 lines inside the g, and make
// one of them transparent and "fat", which will enlarge the
// hit area
lines = gEnter
    .selectAll('.path').data(['visible', 'invisible'])
lines.enter()
    .append('line')
    .attr('class', 'path')
    .attr('marker-end', function(d, i, j) {
        // j is the parent's i
        if (j === 2) {
            return 'url(#arrow)';
        } else {
            return null;
        }
    })
    .attr({
        // returning null from these functions simply defaults to whatever the
        // .path class's CSS props are doing
        'stroke-width': function(d, i) { return d == 'invisible' ? 10 : null },
        'stroke': function(d, i) { return d == 'invisible' ? 'transparent' : null }
    })

这篇关于操纵鼠标悬停在d3.js中的“击打区域”的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！