D3用於（重新）繪製單個對象的約定

我正在使用D3繪製帶有邊框矩形的自定義圖形。在調整窗口大小時，我重新計算SVG大小並想重繪此邊框。目前我在做這在drawGraph()函數被調用的調整大小/新的數據：D3用於（重新）繪製單個對象的約定

... 
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]）來選擇綁定一個值，這樣我可以畫框，或者只是在已經繪製一次的情況下更改其大小。它當然有效，但綁定保證被忽略的數據並且可能有點做事的方式感覺有點奇怪。

這是一個良好的使用習慣，或者是有這樣做的另一種標準的方法，如：

一個D3方法，我從來沒穿過
來得正是利用svg.append('rect')然後去除+重新調整大小
svg.selectAll('*').remove()並重新繪製一切從頭開始？
別的

來源

2017-03-07 Guy G

拆卸和重新劃定的元素就是我稱之爲懶在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>

來源

2017-03-07 12:24:05

D3用於（重新）繪製單個對象的約定

回答

相關問題