如何在响应式图表中正确调整Voronoi的大小

Question

我有一个用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; });

在我的调整大小函数中，我试图重新绘制它：

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

如果有人想尝试一下，可以在这里找到一个示例：

http://plnkr.co/edit/Jj4QpF1bqK901WalNMmR

感谢您的时间！

- user4660717

Answer 1

Voronoi Geom计算与clipExtent相关的像素位置。由于您正在更改宽度（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);

已更新plunker。

- Mark

---

非常感谢！然而，仍然存在一些问题。现在当您更改窗口大小时，图表线和区域未能正确调整大小。此外，悬停文本不再出现，我猜测在移除和重新添加Voronoi路径后该函数不再有效。我认为这个函数应该保留并可以重复使用... 在plunker界面中也看不到，但现在轴在每次调整大小时都会被复制，导致水平刻度线看起来更粗/错误。 有什么想法如何解决？再次非常感谢您的时间！ - user4660717

实际上，Y轴刻度看起来很好，但我发现X轴没有重新计算刻度频率，导致文本重叠。 - user4660717

@CapivaraGraphics，mouseover和mouseout函数在resize函数中超出了作用域范围。我将它们的作用域提高到其父级别，并且一切都应该没问题了。更新后的代码在这里。抱歉造成麻烦。 - Mark

非常棒，运行得很好。显然我对这件事情有些力不从心 ;) - user4660717