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:

Answer

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);
    }
})();
Answer

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

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

See http://jsfiddle.net/kUZuW/

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.