D3.js D3js路径：添加敏感区

我得到了一个d3js路径，我想给它添加敏感区。所谓敏感区，我的意思是我可以使用鼠标指针选择路径，而不必在该路径上移动，但非常接近它（例如5px）。实际上，路径只有一个像素宽，这对于用户选择它来说非常烦人

为了扩大这个区域，我必须创建另一条环绕原始区域的路径。我给它的不透明度为零，当悬停时，我将不透明度更改为0.3（下图中的底部路径）。到目前为止，一切都进展顺利，但由于有数千行代码，我遇到了形式问题。我已经实现了一个虚拟卷轴以获得更高的性能，但是如果我删除敏感区域（第二条路径），它会运行得更快

---

有人想用其他东西替换封闭路径（敏感区）吗？

您可以在符号标记中添加行，然后使用使用标记在SVG容器中使用它，如下所示：

   <svg>
   <symbol id="line1">
        <circle cx="25" cy="25" r="25" />
    </symbol>

   <use xlink:href="#line1" x="0"  y="0"  class="line" />
   <use xlink:href="#line1" x="0"  y="0"  class="zone" />
   <svg>

---

你的折线图上有几千行，怎么看得清楚？我24小时有1500行，用户会显示一天以上。当然不是立刻，而是在2到4个小时内。你跟踪每条线路或路径的id，还是不跟踪？@Shiko不，为什么？@bubbles我添加了一个建议的解决方案，请看一看，谢谢你的回答。但很抱歉，您的解决方案没有帮助，我的线条有不同的形状，所以我需要多个符号，就像我的线条一样多。我将在实际解决方案中使用相同的dom元素。我想删除两条线中的一条（线本身或敏感区线）@bubbles还有另一种方法，但我不确定它在时间上是否昂贵，在鼠标移动时使用最近的对象，然后突出显示最近的路径。谢谢，我以前已经测试过了，确实有点夸张

.line{
    stroke-width: 1px;

}
.zone{
   stroke: transparent;
    stroke-width: 5px;
}
.zone:hover{
   stroke: yellow;
    stroke-width: 9px;
}