Home Manipulating Opacity and Text in D3.js

# Manipulating Opacity and Text in D3.js

Harry Cramer
1#
Harry Cramer Published in 2017-12-07 22:33:22Z
 I'm trying to write a function that changes text a div, using dot-chaining and D3. I want to select my outer div, transition it's opacity to 0, select the inner div and change the text, and then transition the outer div back to 1. So the entire thing looks something like this: d3.select("div#outer").transition() .duration(200) .style("opacity",0) .transition() .duration(200) .style("opacity",1) d3.select("div#inner").transition().delay(200).text("This is the new text")  There's got to be a better way of doing this. Is there a way for me to combine these two selections? Ideally I would make this all one function and just call it accordingly.
Andrew Reid
2#
Andrew Reid Reply to 2017-12-07 22:49:05Z
 You could modify the inner div from within the transition on the outer div, just listen for the end for the transition that sets the outer div's opacity to zero: d3.select("div#outer").transition() .duration(200) .style("opacity",0) .on("end", function() { d3.select("#innerDiv").html("This is new text") }) .transition() .duration(200) .style("opacity",1)  Which looks like (slowed down): d3.select("div#outer").transition() .duration(2000) .style("opacity",0) .on("end", function() { d3.select("#inner").html("This is new text") }) .transition() .duration(2000) .style("opacity",1) #outer { padding: 50px; background-color: #ccc; } 
Some text

 You need to login account before you can post.
Processed in 0.319242 second(s) , Gzip On .