d3 javascript alternate colors on click

Question

Ho appena iniziato a giocare con d3, e mi chiedevo come si potesse alternare i colori di un elemento dopo aver fatto clic su di esso.

Questo violino cambia il colore del cerchio cliccandolo, ma poi vorrei ridare il colore al bianco dopo aver fatto nuovamente clic.

Codice attuale:

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

farsi una levetta funzioni e passare in un 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

Questo anche lavorato, sia pure in modo 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

MODIFICA: non funziona in Chrome, funziona in FF. Il problema è nell'attributo:

this.style.fill 

Chrome cambia "bianco" con "#FFFFFF".

A proposito, la soluzione più chiara dovrebbe essere la commutazione della classe.

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

Vedi http://jsfiddle.net/kUZuW/