Производительность медленная при использовании d3-сетки js

Мне нужно представлять каждый данные в прямоугольнике. Я использовал раскладку сетки, используя нижеследующую цифру http://bl.ocks.org/herrstucki/5684816 Мои данные действительно огромны вокруг 1700. Когда я пытаюсь построить, это займет много времени и когда-нибудь зависает браузер. Вот мой plunker https://plnkr.co/edit/Xzr3RoQlm7DSiIuexmFz Пожалуйста, помогитеПроизводительность медленная при использовании d3-сетки 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

Что вы на самом деле пытаетесь сделать здесь? Ваш код добавляет один прямоугольник за раз, восстанавливая данные, создавая переход, чтобы переместить его на место, установить его непрозрачность и сразу же сделать следующий, следующий и т. Д. Если вы избавитесь от всего этого безумия , добавьте 1700 прямоугольников и отобразите их, нет никакого запаздывания: https://plnkr.co/edit/gLyTzvBVvLfwX7hOOeyW?p=preview – Mark

Thanks Mark. Я хочу показать пользователю, что данные присоединяются один за другим, вместо того, чтобы ждать все 1700 прямых за раз, но, как вы говорите, возможно, причина в том, что производительность медленная. – user123

Вы должны ждать в течение одного набора обновлений и переходов, чтобы закончить до начала следующего раунда. Заимствование 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-сетки js

ответ

Смежные вопросы