onmousedown javacript

Question

전 세계지도에서 마우스를 누른 상태에서 클릭하는 국가의 색을 녹색에서 빨간색으로 변경하려고합니다. 여러 번의 클릭으로 색상을 변경할 수 있지만 while 루프를 추가하려고하면 화면이 얼어 붙습니다. 나 좀 도와 줄 수있어? 또한 어떻게 색상을 녹색에서 빨간색으로 반복 할 수 있습니까? 이 색 빨간색에 도달하고 내가 마우스를 아래로 질주 유지하면 의미는 그래서 항상 전에 당신이 조건 변수 권리를 설정 루프를 사용하고 Heres a fiddle for it

var color = d3.scale.linear().domain([0, 50]).range(["green", "red"]); 
var pas = []; 
var ismousedown = -1; 

country 
    .on("mousemove", function(d, i) { 

     var mouse = d3.mouse(svg.node()).map(function(d) { 
      return parseInt(d); 
     }); 

     tooltip.classed("hidden", false) 
      .attr("style", "left:" + (mouse[0] + offsetL) + "px;top:" + (mouse[1] + offsetT) + "px") 
      .html(d.properties.name); 

    }) 
    .on("mouseout", function(d, i) { 
     tooltip.classed("hidden", true); 
    }) 
    .on("mouseup", function(d, i) { 
     ismousedown = 0; 
    }) 
    .on("mouseout", function(d, i) { 
     tooltip.classed("hidden", true); 
    }) 
    .on("mousedown", function(d, i) { 
     ismousedown = 1; 
     while (ismousedown == 1) { 
      if (pas[d.id]) { 
       pas[d.id]++; 
      } else { 
       pas[d.id] = 1; 
      } 

      d3.select(this) 
       .classed("active", false) 
       .style("fill", function(d, i) { 
        return color(pas[d.id]); 
        return d.properties.color; 
       }); 
     } 
    }); 

Answer 1

나는 setInterval()를 사용하도록 솔루션을 수정했습니다. 이렇게하면 N 밀리 초마다 자동으로 함수가 실행됩니다. 이 예제에서 마우스가 내려가는 동안 색상 업데이트 코드는 매 10ms마다 실행됩니다 (mousedown 기능에서 조정할 수 있음). 마우스를 놓으면 간격이 지워 지므로 더 이상 실행되지 않습니다.

Updated JSFiddle : 당신은 당신의`while` 루프에는 종료 조건이없는

.on("mousedown", function(d,i) { 
    var that = this; 
    ismousedown = true; 

    colorInterval = window.setInterval(function() { 
    // ... 
    }, 10); // <== runs every 10 milliseconds 
}) 

.on("mouseup", function(d,i) { 
    window.clearInterval(colorInterval); 
}); 

Answer 2

... 녹색 등으로 변경 '1'그리고 갇혀. 코드가 이미 .on("mousedown") 상태에서 실행 중이므로 mousedown 변수가 필요하지 않습니다. 나는 또한 작동하는 while 루프를 구현했다. 그러나 색상 변경은 빠른 속도로 진행되므로 변경 사항이 표시되지 않습니다.

내가 제안 :

.on("mousedown", function(d, i) { 

     var counter = 0; 
     var max_counter = 255; 

     while (counter < max_counter) { 

      if (pas[d.id]) { 

       pas[d.id]++; 
      } else { 
       pas[d.id] = 1; 
      } 

      d3.select(this) 
       .classed("active", false) 
       .style("fill", function(d, i) { 
        return color(pas[d.id]); 
        return d.properties.color; }); 
      counter++; 
     } 

    });