svg - 在 d3.js 中操纵鼠标悬停 "hit area"

Question

我要 显示 和 隐藏 SVG 中的一个节点，当 鼠标悬停/ mouseout ，问题是我在节点内的形状是一条只有1.5px宽度的路径，所以不容易在鼠标悬停事件中击中该区域，这绝对不利于用户体验。

我想知道是否有办法做到这一点 命中区域更宽 使用任意宽度，但对用户不可见？

我的代码片段:

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;
}

Answer 1

您可以再添加一个 line到 g笔画透明，笔画宽度大，会增加命中区域。

// 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 }
    })