d3-grid jsを使用するとパフォーマンスが遅くなる

各データを長方形で表す必要があります。私は下の1つを使用してグリッドレイアウトを使用しました http://bl.ocks.org/herrstucki/5684816私のデータは1700年頃には本当に巨大です。私はプロットしようとすると、その長い時間がかかると、いつかブラウザがハングアップします。ここでは、次のラウンドを開始する前に終了するアップデートやトランジションの1セットを待つ必要がd3-grid jsを使用するとパフォーマンスが遅くなる

<!DOCTYPE html> 
<meta charset="utf-8"> 
<style> 
body { 
    font-family: Helvetica; 
    font-size: 10px; 
} 
.point, .rect { 
    fill: #222; 
} 
</style> 
<body> 
<script src="http://d3js.org/d3.v3.min.js"></script> 
<script src="d3-grid.js"></script> 
<script> 


var rects = []; 

var width = 960, 
    height = 500; 


var rectGrid = d3.layout.grid() 
    .bands() 
    .size([360, 360]) 
    .padding([0.1, 0.1]); 

var svg = d3.select("body").append("svg") 
    .attr({ 
    width: width, 
    height: height 
    }) 
.append("g") 
    .attr("transform", "translate(0,0)"); 

for(var i=0; i<1700; i++){ 
    push(); 
} 

function update() { 
    var rect = svg.selectAll(".rect") 
    .data(rectGrid(rects)); 
    rect.enter().append("rect") 
    .attr("class", "rect") 
    .attr("width", rectGrid.nodeSize()[0]) 
    .attr("height", rectGrid.nodeSize()[1]) 
    .attr("transform", function(d) { return "translate(" + (d.x)+ "," + d.y + ")"; }) 
    .style("opacity", 1e-6); 
    rect.transition() 
    .attr("width", rectGrid.nodeSize()[0]) 
    .attr("height", rectGrid.nodeSize()[1]) 
    .attr("transform", function(d) { return "translate(" + (d.x)+ "," + d.y + ")"; }) 
    .style("opacity", 1); 
    rect.exit().transition() 
    .style("opacity", 1e-6) 
    .remove(); 
} 

function push() { 
    rects.push({}); 
    update(); 
} 

</script>

出典

2016-05-03 user123

は、あなたが本当にここでやろうとしていますか？あなたのコードは一度に1つの四角形を追加し、データを再バインドし、その場所に移動して不透明度を設定し、次のものと次のものを直ちに実行するトランジションを作成します...もしあなたがすべての狂気1700の矩形を追加して表示すると、遅延はまったくありません。https://plnkr.co/edit/gLyTzvBVvLfwX7hOOeyW?p=preview – Mark

ありがとうございました。私は、一度にすべての1700 rectを待つのではなく、データが1つずつ追加されていることをユーザーに示したいと思っていますが、その理由があるかもしれないと言っているので、パフォーマンスは遅いです。 – user123

助けてください、私のplunker https://plnkr.co/edit/Xzr3RoQlm7DSiIuexmFzです。 from this question借入とあなたのコードにそれを適用する：

<!DOCTYPE html> 
 
<meta charset="utf-8"> 
 
<style> 
 
body { 
 
    font-family: Helvetica; 
 
    font-size: 10px; 
 
} 
 
.point, .rect { 
 
    fill: #222; 
 
} 
 
</style> 
 
<body> 
 
<script src="http://d3js.org/d3.v3.min.js"></script> 
 
<script src="http://rawgit.com/interactivethings/d3-grid/master/d3-grid.js"></script> 
 
<script> 
 

 

 
var rects = []; 
 

 
var width = 960, 
 
    height = 500; 
 

 

 
var rectGrid = d3.layout.grid() 
 
    .bands() 
 
    .size([360, 360]) 
 
    .padding([0.1, 0.1]); 
 

 
var svg = d3.select("body").append("svg") 
 
    .attr({ 
 
    width: width, 
 
    height: height 
 
    }) 
 
.append("g") 
 
    .attr("transform", "translate(0,0)"); 
 

 

 
var rectC = 1; 
 
rects.push({}); 
 
function update() { 
 
    
 
    var rect = svg.selectAll(".rect") 
 
    .data(rectGrid(rects)); 
 
    
 
    rect.enter().append("rect") 
 
    .attr("class", "rect") 
 
    .attr("width", rectGrid.nodeSize()[0]) 
 
    .attr("height", rectGrid.nodeSize()[1]) 
 
    .attr("transform", function(d) { return "translate(" + (d.x)+ "," + d.y + ")"; }) 
 
    .style("opacity", 1e-6); 
 
    
 
    var transitions = 0; 
 
    rect 
 
    .transition() 
 
    .duration(50) 
 
    .attr("width", rectGrid.nodeSize()[0]) 
 
    .attr("height", rectGrid.nodeSize()[1]) 
 
    .attr("transform", function(d) { return "translate(" + (d.x)+ "," + d.y + ")"; }) 
 
    .style("opacity", 1) 
 
    .each("start", function() { 
 
     transitions++; 
 
    }).each("end", function() { 
 
     if(--transitions === 0) { 
 
      rects.push({}); 
 
      rectC += 1; 
 
      if (rectC < 1700) update(); 
 
     } 
 
    }); 
 

 
    rect.exit().transition() 
 
    .style("opacity", 1e-6) 
 
    .remove(); 
 
} 
 

 
update(); 
 

 
</script>

出典

2016-05-04 00:50:04 Mark

d3-grid jsを使用するとパフォーマンスが遅くなる

答えて

関連する問題