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

谢谢你的时间！

Answer 1

Voronoi Geom正在计算与clipExtent相关的像素位置。由于您要更改宽度（clipextent），因此需要重新运行计算。这是我<section class="wrapper"> <span>One</span> <span>Two</span> <span>Three</span> <span>Four</span> </section>的少数几次之一，我建议只删除voronoi组下的路径并重新添加它们：

d3

更新了plunker。

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

1 个答案: