Очистка памяти при событиях мыши (компьютер тормозит) d3.js

Question

Вот в чем вопрос. Есть мой код, стыренный у друзей c ru.stackoverflow.com. и доработанный мною.При событиях мыши он начинает тормозить чем больше действий ролика мыши тем больше. В чем проблема???

Вот мой код.

Внимание! Копируйте код себе в index.html файл, т.к. он не помещается в страницу

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v5.min.js"></script>
  <style>
html,body{
  overflow-y:hidden;
}
</style>
</head>
<body>
<script>
//W1="55,55 100,100 300,555 777,888"; Такой формат должен быть везде. или хъ[a,b,c,d,e,f,g,h]

var ddd=Math.floor((Date.now() - Date.parse(new Date().getFullYear(), 0, 0)) / 86400000);
//var S=ddd-1;
var S=244;
//var S=ddd-1;
var maxddd=366;
  var R1=400.0;
  var R2=340.0;
  var R3=280.0;
  
  var delta=450.0;
  
  var p=(2*Math.PI)/366; 
  var x1 = [366+1];
  var y1 = [366+1];
  var x2 = [366+1];
  var y2 = [366+1];
  var x3 = [366+1];
  var y3 = [366+1];
  
  
  for(var i=0;i<=367;i++){
  y1[i]=R1*(Math.sin(i*p))+delta;
  x1[i]=R1*(Math.cos(i*p))+delta;
  y2[i]=R2*(Math.sin(i*p))+delta;
  x2[i]=R2*(Math.cos(i*p))+delta;
  y3[i]=R3*(Math.sin(i*p))+delta;
  x3[i]=R3*(Math.cos(i*p))+delta;
  }

var canvas = d3.select("body")
   .append("svg")
   .attr("height", 1366)
   .attr("width", 1024);
var polygon0=canvas.append("polygon")



for(var i=0;i<=maxddd-1;i++){
   polygon0=canvas.append("polygon")
   .attr("points", [x1[i],y1[i],x1[i+1],y1[i+1],x2[i+1],y2[i+1],x2[i],y2[i]])
   .style("fill", "yellow")
   .style("stroke", "black")
   .style("strokeWidth", "1px")  
   }


var polygon1=canvas.append("polygon")
for(var i=0;i<=ddd-1;i++){
   polygon1=canvas.append("polygon")
   .attr("points", [x1[i],y1[i],x1[i+1],y1[i+1],x2[i+1],y2[i+1],x2[i],y2[i]])
   .style("fill", "lightgreen")
   .style("stroke", "black")
   .style("strokeWidth", "1px")  
   }
   
var polygon2=canvas.append("polygon")
polygon=canvas.append("polygon")
   .attr("points", [x1[S],y1[S],x1[S+1],y1[S+1],x2[S+1],y2[S+1],x2[S],y2[S]])
   .style("fill", "blue")
   .style("stroke", "black")
   .style("strokeWidth", "1px")
   
   
window.addEventListener("wheel", function(ev) {
  var dir = Math.sign(ev.deltaY);
	if(dir==1){
	
	S++;
	
	
	}
	
	else if(dir==-1){
	S--;
	}

for(var i=0;i<=maxddd-1;i++){
   polygon0=canvas.append("polygon")
   .attr("points", [x1[i],y1[i],x1[i+1],y1[i+1],x2[i+1],y2[i+1],x2[i],y2[i]])
   .style("fill", "yellow")
   .style("stroke", "black")
   .style("strokeWidth", "1px")  
   }	
  
 
 for(var i=0;i<=ddd-1;i++){
   polygon1=canvas.append("polygon")
   .attr("points", [x1[i],y1[i],x1[i+1],y1[i+1],x2[i+1],y2[i+1],x2[i],y2[i]])
   .style("fill", "lightgreen")
   .style("stroke", "black")
   .style("strokeWidth", "1px")  
   }
   
  
  
  polygon2=canvas.append("polygon")
   .attr("points", [x1[S],y1[S],x1[S+1],y1[S+1],x2[S+1],y2[S+1],x2[S],y2[S]])
   .style("fill", "blue")
   .style("stroke", "black")
   .style("strokeWidth", "1px")  

  

});


</script>
</body>

Answer 1

Проблема в том, что на каждую прокрутку, вместо перекраски одного элемента, на страницу добавляется заново нарисованные элементы

Для решения достаточно менять attrs у синего элемента

//W1="55,55 100,100 300,555 777,888"; Такой формат должен быть везде. или хъ[a,b,c,d,e,f,g,h]

var ddd = Math.floor((Date.now() - Date.parse(new Date().getFullYear(), 0, 0)) / 86400000);
//var S=ddd-1;
var S = 244;
//var S=ddd-1;
var maxddd = 366;
var R1 = 400.0;
var R2 = 340.0;
var R3 = 280.0;

var delta = 450.0;

var p = (2 * Math.PI) / 366;
var x1 = [366 + 1];
var y1 = [366 + 1];
var x2 = [366 + 1];
var y2 = [366 + 1];
var x3 = [366 + 1];
var y3 = [366 + 1];


for (var i = 0; i <= 367; i++) {
  y1[i] = R1 * (Math.sin(i * p)) + delta;
  x1[i] = R1 * (Math.cos(i * p)) + delta;
  y2[i] = R2 * (Math.sin(i * p)) + delta;
  x2[i] = R2 * (Math.cos(i * p)) + delta;
  y3[i] = R3 * (Math.sin(i * p)) + delta;
  x3[i] = R3 * (Math.cos(i * p)) + delta;
}

var canvas = d3.select("body")
  .append("svg")
  .attr("height", 1366)
  .attr("width", 1024);
var polygon0 = canvas.append("polygon")



for (var i = 0; i <= maxddd - 1; i++) {
  polygon0 = canvas.append("polygon")
    .attr("points", [x1[i], y1[i], x1[i + 1], y1[i + 1], x2[i + 1], y2[i + 1], x2[i], y2[i]])
    .style("fill", "yellow")
    .style("stroke", "black")
    .style("strokeWidth", "1px")
}


var polygon1 = canvas.append("polygon")
for (var i = 0; i <= ddd - 1; i++) {
  polygon1 = canvas.append("polygon")
    .attr("points", [x1[i], y1[i], x1[i + 1], y1[i + 1], x2[i + 1], y2[i + 1], x2[i], y2[i]])
    .style("fill", "lightgreen")
    .style("stroke", "black")
    .style("strokeWidth", "1px")
}

var polygon2 = canvas.append("polygon")
polygon = canvas.append("polygon")
  .attr("points", [x1[S], y1[S], x1[S + 1], y1[S + 1], x2[S + 1], y2[S + 1], x2[S], y2[S]])
  .style("fill", "blue")
  .style("stroke", "black")
  .style("strokeWidth", "1px")
  .classed("sss", true);


window.addEventListener("wheel", function(ev) {
  var dir = Math.sign(ev.deltaY);
  if (dir == 1) {
    S++;
  } else if (dir == -1) {
    S--;
  }
  polygon2.attr("points", [x1[S], y1[S], x1[S + 1], y1[S + 1], x2[S + 1], y2[S + 1], x2[S], y2[S]])

});

html,
body {
  overflow-y: hidden;
}

<script src="https://d3js.org/d3.v5.min.js"></script>

БЛОГ НА HUSL

Очистка памяти при событиях мыши (компьютер тормозит) d3.js

Ответы (1 шт):