d3 javascript tıklamadaki alternatif renkler

Question

Sadece d3 ile oynamaya başladım ve tıklayarak bir öğenin renklerini nasıl değiştirebileceğinizi merak ediyorum.

Bu keman, dairenin rengini tıklattığında tıklatır, ancak tekrar tıkladığınızda rengin tekrar beyaz olmasını isterim.

Güncel Kodu:

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

Kendine bir geçiş fonksiyonu yapın ve tıklama içine geçmek: 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

Bu aynı zamanda bir jankier moda olsa çalıştı. . .

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

DÜZENLEME: Chrome'da çalışmıyor, FF'de çalışıyor. Sorun dolgu atributte içinde: "# FFFFFF" tarafından

this.style.fill 

Krom değişikliği "beyaz". Bu arada, daha net olan çözüm, sınıfı değiştirmek zorundadır.

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

http://jsfiddle.net/kUZuW/