Using SVG attributes in variables in d3

Question

I'm trying to set up a visualisation in d3 where it does different things depending on what else has already happened. So, for instance, I can change the colour of a rectangle, and depending on the colour of the rectangle, other functions behave differently. Except I can't get it to work.

Edit: Here's a fuller example of what I'm trying to do. I've got a bar graph that is coloured green. Click a button to turn the colours to either red or blue depending on the colour of another box, which itself can be red or blue.

 var dataset = [ 1,3,4,2,5];
 var w = 600;
 var h = 500;

 var xScale = d3.scale.ordinal()
                        .domain(d3.range(dataset.length))
                        .rangeRoundBands([0, w], 0.05);

 var yScale = d3.scale.linear()
                        .domain([0,10])
                        .range([0, h]);

                        //Create SVG element
        var svg = d3.select("body")
                    .append("svg")
                    .attr("width", w)
                    .attr("height", h);

//this is how to change the colour of the box from red to blue and back again



        svg.append("text")
                .attr("x", 170)
                .attr("y", 50)
                .text("Make box red")
                .attr("fill", "black")
                .attr("id","clicktwo")
                .on("mouseover",function() {
    d3.select(this)
.attr("cursor", "pointer");})







        svg.append("text")
                .attr("x", 170)
                .attr("y", 80)
                .text("Make box blue")
                .attr("fill", "black")
                .attr("id","clickfour")
                .on("mouseover",function() {
    d3.select(this)
.attr("cursor", "pointer");})

//here's a box you can change the colour of

    svg.append("rect")
.attr("x",350)
.attr("y",60)
.attr("width",50)
.attr("height",30)
.attr("fill","blue")
.attr("stroke", "black")
.attr("id","boxfive")

// this is the variable i'm bothered about, set to the value of the colour of boxfive

    var boxColour = svg.select("#boxfive")
    .attr("fill");                      


// click this one to make the bars match the colour of the box



svg.append("text")
            .attr("x", 5)
                .attr("y", 50)
                .text("Make bars match box")
                .attr("fill", "black")
                .attr("id","clickone")
                .on("mouseover",function() {
    d3.select(this)
.attr("cursor", "pointer");})


   / click this to reset the colour of the bars                             


        svg.append("text")
                .attr("x", 5)
                .attr("y", 80)
                .text("Reset bar colour")
                .attr("fill", "black")
                .attr("id","clickthree")
                .on("mouseover",function() {
    d3.select(this)
.attr("cursor", "pointer");})






        svg.selectAll()
           .data(dataset)
           .enter()
           .append("rect")
           .attr("x", function(d, i) {              
                        return xScale(i);
                    })
             .attr("y", function(d) {
                return h-yScale(d);
           })
           .attr("width", w / 9)
           .attr("height", function(d) {
                return yScale(d);
                })
            .attr("fill", "green")
           .attr("id", "thenbars")
                ;


        d3.select("svg #clickone")
            .on("click", function() {       

     svg.selectAll("svg #thenbars")
     .data(dataset)
         .transition()                      
        .duration(500)
        .attr("fill",function() { 
                    if (boxColour = "red") {return "red"} 
        else    { return "blue"}
        ;})


        });

        //reset the bars to green

  d3.select("svg #clickthree")
            .on("click", function() {       

 svg.selectAll("svg #thenbars")
     .data(dataset)
         .transition()                      
        .duration(500)
                    .attr("fill","green")            
        });

  // and this is how you change the colour of the box

        d3.select("svg #clicktwo")
            .on("click", function() {                   

        svg.select("svg #boxfive")
.attr("fill","red")

});

// and change it back

        d3.select("svg #clickfour")
            .on("click", function() {       

        svg.select("svg #boxfive")
.attr("fill","blue")
.attr("stroke","none")

});

Answer 1

You need to set the boxColour variable inside the click handler, otherwise it's only set once and not updated when the colour changes. Changed jsfiddle here.