在d3.js中操纵鼠标悬停"命中区域"

Question

我想显示和隐藏在SVG一个节点时,鼠标悬停/鼠标移开,问题是,我的节点内部形状是一个只有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 }
    })