d3 javascript colores alternativos al hacer clic

Question

Estoy empezando a jugar con d3 y me preguntaba cómo podría alternar los colores de un elemento al hacer clic en él.

Este violín cambia el color del círculo haciendo clic en él, pero luego me gustaría que el color vuelva a ser blanco después de hacer clic de nuevo.

Código actual:

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

Hazte una función de activación y pasarlo en el clic: 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

Esto también trabajó, aunque de forma 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

EDITAR: No funciona en Chrome, funciona en FF. El problema está en el relleno atributte:

this.style.fill 

Cambio de cromo "blanco" por "#FFFFFF".

Por cierto, la solución más clara debería ser alternar la clase.

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

Ver http://jsfiddle.net/kUZuW/