d3 javascript click function call

Question

d3을 클릭하면 플롯 점의 색상을 변경하려고하는데, 현재로서는이 점을 얻지 못하는 것 같습니다. 아래의 주석 달린 줄은 흰색에서 자홍색으로 색상을 변경하지만, toggleColor 함수는 아무 것도하지 않는 것 같습니다. 사실, 경고는 처음 실행될 때만 발생하며 지점을 클릭 할 때 발생하지는 않습니다. 여기서 내가 뭘 잘못하고 있니?

시작하려면

 
var circle = graph.selectAll("circle.value") 
    .data(data) 
    .enter().append("circle") 
    .attr("class", "value") 
    .attr("cx", function(d) { return x(d.hour); }) 
    .attr("cy", function(d) { return y(d.value); }) 
    .attr("r", 5) 
    //.on("click", function(){d3.select(this).attr("class", "flagged");}); 
    .on("click", toggleColor); 


var toggleColor = (function(){ 
    // throw in an alert for good measure. . . 
    alert("Clicked?") 
    var currentColor = "white"; 
    return function(){ 

     currentColor = currentColor == "white" ? "magenta" : "white"; 
     d3.select(this).atrr("class", "flagged"); 
    } 
    })(); 

Answer 1

, var toggleColor는 여전히 (이 페이지 아래 더 정의되어 있기 때문에) 당신이 클릭 이벤트를 배선하고있는 시점에서 정의되지 않는다. 그래서 그것을 옮겨야합니다.

그런 다음 경고가 런타임에 한 번 나타나는 이유는 해당 코드가 실행되기 때문입니다. 코드의 마지막 줄에있는 ()에 의해 명시된 것처럼 외부 함수는 선언 된 직후에 실행됩니다. 그 때 alert()이 호출됩니다. 내부 함수가 클릭에서 실제로 실행될 코드이기 때문에 내부 함수의 본문으로 이동하려고합니다. 즉, 반환되는 함수입니다.