CODEWITHSUNDEEP
javascripthtmlcssd3.jsselection
Harrison Cramer
Harrison Cramer

Reputation: 4496

Manipulating Opacity and Text in D3.js

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.

Upvotes: 1

Views: 847

Answers (1)

Andrew Reid
Andrew Reid

Reputation: 38181

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;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.0/d3.min.js"></script>


<div id="outer">
  <div id="inner">Some text </div>
</div>

Upvotes: 4

Related Questions