D3 Konvention zum (erneuten) Zeichnen eines einzelnen Objekts

Question

Ich benutze D3, um ein benutzerdefiniertes Diagramm mit einem Rahmenrechteck zu zeichnen. Bei der Fenstergrößenanpassung berechne ich die SVG-Größe neu und möchte diesen Rahmen neu zeichnen. Ich tue dies derzeit in einer drawGraph() Funktion, die auf Resize/neue Daten aufgerufen wird:

... 
svg.selectAll('rect') 
    .data([true]) 
    .attr('width', w) 
    .attr('height', h) 
    .enter() 
    .append('rect') 
    .attr('x', 0) 
    .attr('y', 0) 
    .attr('width', w) 
    .attr('height', h) 
    .style('fill', 'none') 
... 

also - ich einen einzelnen Wert in einem Array bin Bindung ([true]) auf die Auswahl, so dass ich entweder die zeichnen Box, oder ändern Sie einfach seine Größe, wenn es bereits einmal gezeichnet wurde. Es funktioniert sicherlich, aber es fühlt sich etwas seltsam an, Daten zu binden, die garantiert ignoriert werden, und möglicherweise eine etwas hacky Art, Dinge zu tun.

Ist dies eine gut gebrauchte Konvention, oder gibt es einen anderen Standard-Weg, dies zu tun, wie zum Beispiel:

• A D3 Methode, die ich nicht über
• gekommen sind, gerade svg.append('rect') und anschließend Entfernen + Neu zeichnen auf Größe ändern
• svg.selectAll('*').remove() und alles von Grund auf neu zeichnen?
• Alles andere

Answer 1

aus- und neu gezeichnet Elemente nenne ich faul Codierung oder lazy update in D3.

Das heißt, warum nicht einfach das Rechteck einer Variablen zuweisen und ändern Sie es bei der Größenänderung? So etwas wie diese (klicken Sie auf "volle Seite" und die Größe der Fenster):

var div = document.getElementById("div"); 
 
var svg = d3.select("svg") 
 
var rect = svg.append("rect")//here you define your rectangle 
 
    .attr("width", 300) 
 
    .attr("height", 150) 
 
    .attr("stroke-width", 3) 
 
    .attr("stroke", "black") 
 
    .attr("fill", "none"); 
 

 
function resize() { 
 
    var width = div.clientWidth; 
 

 
    svg.attr("width", width) 
 
    .attr("height", width/2); 
 
    
 
    //here you just change its width and height 
 
    rect.attr("width", width) 
 
    .attr("height", width/2); 
 
} 
 

 
window.addEventListener("resize", resize);

svg { 
 
    background-color: tan; 
 
}

<script src="//d3js.org/d3.v4.min.js"></script> 
 
<div id="div"> 
 
    <svg></svg> 
 
</div>