在 d3.js 中操作鼠标悬停“命中区域”答案

【问题标题】：manipulate mouseover "hit area"in d3.js在 d3.js 中操作鼠标悬停“命中区域”
【发布时间】：2014-12-01 22:51:54
【问题描述】：

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

我想知道是否有办法使用任意宽度使点击区域变宽，但用户不可见？

我的代码的 sn-p：

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

【问题讨论】：

标签： svg d3.js

【解决方案1】：

您可以在g 中添加另一个line，笔触透明，笔触宽度大，这样会增加点击区域。

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

【讨论】：

我最终以稍微不同的方式做这件事，但你的回答绝对让我走上了正确的道路！谢谢您的帮助！ +25！干杯！

【解决方案2】：

你如何在这里定义link？我无法弄清楚您的解决方案，但我遵循了将两行（一条可见，另一条不可见）附加到父 g 元素的相同想法。我认为这不是太有效，因为我最终不得不两次调用线坐标（一次用于可见线，一次用于不可见线）。这就是我所做的：

//define the link element in a parent g
var link = svg.selectAll("g.link")
              .data(json.links)
              .enter().append("g")
              .on("click", linkMouseClick)
              .on("mouseover", linkMouseover);

//append a visible child line to parent g
var line = link.append("line")
               .attr("class", "link")
               .style("stroke-width", "2");

//append a second, fatter line to g and make it invisible
var fatline = link.append("line")
                  .attr("class", "link")
                  .attr("style", "stroke:transparent;stroke-width:10px");

//call for line coordinates for both lines
force.on("tick", function() {
    line.attr("x1", function(d) { return d.source.x; })
        .attr("y1", function(d) { return d.source.y; })
        .attr("x2", function(d) { return d.target.x; })
        .attr("y2", function(d) { return d.target.y; });

    fatline.attr("x1", function(d) { return d.source.x; })
        .attr("y1", function(d) { return d.source.y; })
        .attr("x2", function(d) { return d.target.x; })
        .attr("y2", function(d) { return d.target.y; }); 

 });

它有效，但如果有人可以提出改进建议，那就太好了，谢谢！

【讨论】：