D3単一のオブジェクトを描画するための規約

Question

D3を使用して、周囲に矩形の境界線を持つカスタムグラフを描画しています。ウィンドウのサイズ変更で、SVGサイズを再計算し、この境界線を再描画したい。私は現在、リサイズ/新しいデータに呼び出さdrawGraph()機能でこれをやっている：

... 
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') 
... 

すなわち - 私は描くことができますいずれかのように、私は選択に配列（[true]）で単一の値を結合しています既に描画されている場合はサイズを変更するだけです。それは確かに機能しますが、無視されることが保証されているデータをバインドするのはちょっと奇妙で、おそらく少しばかげたやり方です。

これは、よく使用される規則ですか、これを行うための別の標準的な方法があり、例えば：

• A私はちょうどsvg.append('rect')を使用して、削除
• に遭遇していませんでしたD3方法+サイズ変更時にそれを再描画する
• svg.selectAll('*').remove()すべてゼロから再描画しますか？
• 要素を削除し、再描画他に何か

Answer 1

は、私はD3にか怠惰更新怠惰なコーディング呼んでいます。

言われているように、単に矩形を変数に代入してサイズを変更するだけではどうですか？

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>

：この（ "フル・ページ" をクリックして、ウィンドウのサイズを変更）のようなもの