Javascript 如何在响应图中正确调整voronoi的大小

我有一个用d3制作的响应性折线图，但在调整悬停状态下使用的voronoi的大小时遇到了问题。我怀疑我没有正确地引用它

我在这里添加了voronoi：

var voronoiGroup = svg.append("g")

.attr("class", "voronoi");

voronoiGroup.selectAll("line")
.data(voronoi(d3.nest()
      .key(function(d) { return xScale(d.date) + "," + yScale(d.value); })
      .rollup(function(v) { return v[0]; })
      .entries(d3.merge(ranksFiltered.map(function(d) { return d.values;})))
      .map(function(d) { return d.values; })))
.enter()

.append("path")
   .attr("id", "cells")
  .attr("d", function(d) { return "M" + d.join("L") + "Z"; })
  .datum(function(d) { return d.point; });

在我的resize函数中，我尝试重新绘制它：

  svg.select("#cells path")
  .attr("d", function(d) { return "M" + d.join("L") + "Z"; })
  .datum(function(d) { return d.point; });;

如果有人想尝试一下，这里有一个提示：

---

谢谢你抽出时间

Voronoi Geom正在计算与图像相关的像素位置。由于您正在更改宽度（clipextent），因此需要重新运行计算。这是我为数不多的使用

d3

的情况之一，我建议只删除voronoi组下的路径并重新添加它们：

        voronoi.clipExtent([[0, -10], [width+10, height]]);
        voronoiGroup.selectAll("path").remove();

        voronoiGroup.selectAll("cells")
          .data(voronoi(vd))
          .enter()
          .append("path")
          .attr("class", "cells")
          .attr("d", function(d) { return "M" + d.join("L") + "Z"; })
          .datum(function(d) { return d.point; })
          .attr("stroke", "red")
          .on("mouseover", mouseover)
          .on("mouseout", mouseout);

---

更新。

非常感谢您！然而，仍然存在一些遗留问题。现在，更改窗口大小时，图表线和区域的大小没有正确调整。此外，悬停文本不再出现，我猜在删除并重新添加voronoi路径后，该函数不再有效。我认为这个功能会保留下来，并且可以重新使用。。。在plunker界面中也不可见，但现在看起来轴在每次调整大小时都被复制，导致水平刻度看起来更厚/错误。知道怎么解决吗？再次感谢您抽出宝贵的时间！实际上Y轴的记号看起来不错，但我看到x轴没有重新计算记号频率，结果是文本collision@CapivaraGraphics中，

mouseover

，

mouseout

功能超出了调整大小功能的范围。我将他们的范围扩大到他们的家长级别，一切都应该正常。更新代码。抱歉，太棒了，很好用。很明显，我对这件事有点不知所措；）