如何增加D3v4线的悬停面积

Question

我在该行上具有悬停效果，但是该行很细，所以我必须增加悬停区域，以便用户可以轻松地进行悬停。

有人遇到相同的问题吗？

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!'));