d3 javascript alternate colors on click
I'm just starting playing around with d3, and was wondering how you could alternate the colors of a element upon clicking it.
This fiddle changes the color of the circle clicking it, but then I'd like to get the color back to being white after clicking again.
Current Code:
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");});
Answers:
Make yourself a toggle function and pass it into the click: 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);
}
})();
This also worked, albeit in a jankier fashion. . .
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]);});
EDIT: Does not work in Chrome, works in FF. The problem is in the fill atributte:
this.style.fill
Chrome change "white" by "#FFFFFF".
By the way, the clearer solution should be toggling the class.
.on("click", function(){var nextColor = this.style.fill == "white" ? "magenta" : "white";
d3.select(this).style("fill", nextColor);});