如何在综合图表中正确调整voronoi的大小

How to properly resize voronoi in a reponsive chart

本文关键字：调整 voronoi 综合      更新时间：2023-09-26

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

谢谢你抽出时间！

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

更新了plunker。

相关文章：