Wie man Voronoi in einem Reponsive-Diagramm richtig skaliert

Question

Ich habe ein reaktionsschnelles Liniendiagramm mit d3 gemacht, aber habe Probleme mit der Größe der Voronoi für den Hover-Zustand. Ich vermute, ich beziehen sich nicht auf den richtigen Weg ...

ich die voronoi hier hinzugefügt:

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

und in meiner Formatfunktion, ich versuche, es neu zu zeichnen:

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

Wenn jemand will, um es einen Stich nehmen, gibt es eine zupfen hier:

http://plnkr.co/edit/Jj4QpF1bqK901WalNMmR

Danke für deine Zeit!

Answer 1

Der Voronoi Geom berechnet Pixelpositionen in Bezug auf die clipExtent. Da Sie Ihre Breite ändern (clipextent), müssen Sie die Berechnungen erneut ausführen. Dies ist eines der wenigen Male, mit d3, die ich entfernen würde empfehlen, nur die Wege unter die voronoi Gruppe und re-adding ihnen:

 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 aktualisiert.