D3 javascript альтернативные цвета при нажатии

Я только начинаю играть с d3, и мне было интересно, как вы можете чередовать цвета элемента при нажатии на него.

Эта скрипка изменяет цвет круга, щелкнув по нему, но затем я хотел бы вернуть цвет обратно в белый цвет после повторного нажатия.

Текущий код:

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");});

Ответы

Ответ 1

Сделайте себе функцию переключения и переместите ее в клик: 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);
    }
})();

Ответ 2

Это также сработало, хотя и более явным образом.,

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]);});

Ответ 3

EDIT: не работает в Chrome, работает в FF. Проблема заключается в заполнении атрибута:

this.style.fill

Chrome изменит "белый" на "#FFFFFF".

Кстати, более ясное решение должно переключать класс.

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

См. http://jsfiddle.net/kUZuW/