CODEWITHSUNDEEP
javascriptcssd3.js
Ian
Ian

Reputation: 34489

Transitions styles back to CSS defaults

I'm working on some D3 visualizations and what I've found is that I'm having to define a lot of styles in my code - that really I'd prefer to have just in my CSS.

The reason for doing this is simply to support transitions. I've found that I can run a transition from a style applied in CSS to an inline one, but then I can't remove that style back to the original. Instead all of them need to be in-line. Like in the following example:

var svg = d3.select("svg");

var c1 = svg.append("circle")
            .attr("class", "red")
            .attr("r", 25)
            .attr("cx", 50)
            .attr("cy", 50);

var c2 = svg.append("circle")
            .attr("r", 25)
            .attr("cx", 250)
            .attr("cy", 50)
            .style("fill", "red");

svg.selectAll("circle")
   .transition()
   .delay(2000)
   .duration(2000)
   .style("fill", "blue");

c1.transition()
  .delay(5000)
  .duration(2000)
  .style("fill", "");

c2.transition()
  .delay(5000)
  .duration(2000)
  .style("fill", "red");
.red { 
   fill: red;  
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<svg width="500" height="500">
</svg>

The circle on the left jumps straight back to red, while the one on the right transitions back.

What I'd like to do is transition the left circle back, without having to re-define the original colour I'm using from CSS in my Javascript code.

Does anyone know of an elegant way to achieve this?

Upvotes: 1

Views: 163

Answers (2)

Ian
Ian

Reputation: 34489

So using Gilsha's answer I managed to figure out that you can actually grab the original CSS style later on so you don't need to save it. Seems even when the colour is blue, I can go back and grab the red colour:

c1.transition()
  .delay(5000)
  .duration(2000)
  .style("fill", function(d) { 
       var selection = d3.select(this);
       var currentStyle = selection.style("fill");
       var defaultStyle = selection.style("fill", null).style("fill");
       selection.style("fill", currentStyle");
       return defaultStyle;
 });


var svg = d3.select("svg");

var c1 = svg.append("circle")
            .attr("class", "red")
            .attr("r", 25)
            .attr("cx", 50)
            .attr("cy", 50);

var c2 = svg.append("circle")
            .attr("r", 25)
            .attr("cx", 250)
            .attr("cy", 50)
            .style("fill", "red");

svg.selectAll("circle")
   .transition()
   .delay(2000)
   .duration(2000)
   .style("fill", "blue");

c1.transition()
  .delay(5000)
  .duration(2000)
  .style("fill", function(d) {
       var selection = d3.select(this);
       var currentStyle = selection.style("fill");
       var defaultStyle = selection.style("fill", null).style("fill");
       selection.style("fill", currentStyle);
       return defaultStyle;
  });

c2.transition()
  .delay(5000)
  .duration(2000)
  .style("fill", "red");
.red { 
   fill: red;  
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<svg width="500" height="500">
</svg>

Upvotes: 2

Gilsha
Gilsha

Reputation: 14591

Try this code.

var color = c1.style("fill");


var svg = d3.select("svg");

var c1 = svg.append("circle")
            .attr("class", "red")
            .attr("r", 25)
            .attr("cx", 50)
            .attr("cy", 50);

var c2 = svg.append("circle")
            .attr("r", 25)
            .attr("cx", 250)
            .attr("cy", 50)
            .style("fill", "red");

//Get fill color from css
var color = c1.style("fill");

svg.selectAll("circle")
   .transition()
   .delay(2000)
   .duration(2000)
   .style("fill","blue");

c1.transition()
  .delay(5000)
  .duration(2000)
  .style("fill", color);

c2.transition()
  .delay(5000)
  .duration(2000)
  .style("fill", "red");
.red { 
   fill: red;  
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<svg width="500" height="500">
</svg>

Upvotes: 1

Related Questions