応答グラフでボロノイのサイズを正しく調整する方法

Question

d3で作成した応答線グラフがありますが、ホバー状態に使用するボロノイのサイズを変更する際に問題があります。

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

誰かがそれで刺しを取りたい場合は、plunkがここにあります：

http://plnkr.co/edit/Jj4QpF1bqK901WalNMmR

お時間をありがとう！

Answer 1

Voronoi Geomは、clipExtentに関連するピクセル位置を計算しています。あなたの幅（クリップエクステント）を変更しているので、計算を再実行する必要があります。

plunkerを更新しました

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

：これは、私はちょうどあなたのボロノイグループの下にパスを削除し、それらを再追加することをお勧めしますd3で数回の一つです。