Question

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

我想选择我的外部div，将它的不透明度转换为0，选择内部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")

必须有更好的方法来做到这一点。我有办法将这两种选择结合起来吗？理想情况下，我会将这一切都设为一个函数，并相应地调用它。

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中操纵不透明度和文本

1 个答案: