d3 javascript alternatywne kolory po kliknięciu

Question

Po prostu zaczynam grać z d3 i zastanawiałem się, jak można zmienić kolory elementu po kliknięciu.

To skrzypce zmienia kolor koła klikając na niego, ale potem chciałbym przywrócić kolor do białego po kliknięciu ponownie.

Aktualny Kod:

var sampleSVG = d3.select("#viz") 
     .append("svg") 
     .attr("width", 100) 
     .attr("height", 100);  

    sampleSVG.append("circle") 
     .style("stroke", "gray") 
     .style("fill", "white") 
     .attr("r", 40) 
     .attr("cx", 50) 
     .attr("cy", 50) 
     .on("click", function(){d3.select(this).style("fill", "magenta");}); 

Answer 1

Bądź bardziej funkcją przełączania i przekazać go do kliknięcia: http://jsfiddle.net/maniator/Bvmgm/6/

var toggleColor = (function(){ 
    var currentColor = "white"; 

    return function(){ 
     currentColor = currentColor == "white" ? "magenta" : "white"; 
     d3.select(this).style("fill", currentColor); 
    } 
})(); 

Answer 2

to również działało, aczkolwiek w sposób jankier. . .

var PointColors = ['white', 'magenta'] 
var sampleSVG = d3.select("#viz") 
    .append("svg") 
    .attr("width", 100) 
    .attr("height", 100);  

sampleSVG.append("circle") 
    .style("stroke", "gray") 
    .style("fill", "white") 
    .attr("r", 40) 
    .attr("cx", 50) 
    .attr("cy", 50) 
    .on("click", function(){ 
     PointColors = [PointColors[1], PointColors[0]] 
     d3.select(this).style("fill", PointColors[0]);}); 

Answer 3

EDYCJA: Nie działa w Chrome, działa w trybie FF. Problem jest w atrybucie wypełnienia:

this.style.fill 

Zmiana chromu "biały" przez "#FFFFFF".

Nawiasem mówiąc, jaśniejsze rozwiązanie powinno być przełączaniem klasy.

.on("click", function(){var nextColor = this.style.fill == "white" ? "magenta" : "white"; 
     d3.select(this).style("fill", nextColor);}); 

Zobacz http://jsfiddle.net/kUZuW/