d3.js - 如何增加 Line D3v4 的悬停区域

Question

我在线上有悬停效果，但线很细，所以我必须增加悬停区域，以便用户可以轻松悬停。

有人有同样的问题吗？

标签： d3.js

Answer 1

如果将颜色设置为"transparent"，路径将对鼠标事件做出反应，但不可见。

例如，假设您有一个<line>（或<path>，没关系）：

svg.append('line')
  .attr('x1', 10).attr('y1', 10)
  .attr('x2', 50).attr('y2', 50)
  .attr('stroke', 'black').attr('stroke-width', 1)
  .on('click', () => console.log('click!'));

我建议<line>用更大的stroke-width和添加第二个stroke="transparent"。您可以.clone为此使用方法：

svg.append('line')
  .attr('x1', 10).attr('y1', 10)
  .attr('x2', 50).attr('y2', 50)
  .attr('stroke', 'black').attr('stroke-width', 1)
  .clone()
    .attr('stroke', 'transparent').attr('stroke-width', 10)    
    .on('click', () => console.log('click!'));