Home Manipulating Opacity and Text in D3.js
Reply: 1

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

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.319242 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO