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