在 D3.js 中操纵不透明度和文本

Question

我正在尝试使用点链和 D3 编写一个函数来更改文本 a div。

我想 select 我的外部 div，将其不透明度转换为 0，select 内部 div 并更改文本，然后转换外部 div 回到 1。所以整个事情看起来像这样：

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")

一定有更好的方法来做到这一点。有没有办法让我将这两个 select 离子结合起来？理想情况下，我会让这一切成为一个功能，然后相应地调用它。

Answer 1

您可以从外部 div 的过渡中修改内部 div，只需监听将外部 div 的不透明度设置为零的过渡结束:

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)

看起来像（慢下来）：

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>

在 D3.js 中操纵不透明度和文本

Manipulating Opacity and Text in D3.js

html

javascript

css

selection

d3.js