为什么.each（）不在D3中工作？

Question

我有一列按钮。当用户点击按钮时，我想显示一条消息，并在几秒钟后隐藏它。

Jsfiddle

HTML

<div class="wrapper">
  <div class="add">
    Add
    <span class="message"></span>
  </div>
  <div class="add">
    Add
    <span class="message"></span>
  </div>
</div

D3

d3.select(".add")
  .on("click", function() {
    d3.selectAll(".message")
      .each(function() {
        d3.select(this)
          .transition()
          .duration(500)
          .style("opacity", 1)
          .text("added");
     })
   })

我有两个问题：

1. 当＆＃39;添加＆＃39;单击按钮显示所有消息，而不是单击按钮旁边的消息。我使用.each的方式有什么问题吗？

2. 一段时间后我无法隐藏消息。我尝试使用delay和fadeOut，但它打破了整个功能。

非常感谢任何帮助。

段

＆＃13;
＆＃13;
d3.selectAll(".add")
  .on("click", function() {
    d3.selectAll(".message")
      .each(function() {
        d3.select(this)
          .transition()
          .duration(500)
          .style("opacity", 1)
          .text("added");
      })
  })
＆＃13;
.wrapper {
  display: inline-block;
  margin: 50px;
  width: 200px;
}
.wrapper div {
  padding: 16px 32px;
  background-color: grey;
  color: #FFF;
  font-family: sans-serif;
  cursor: pointer;
  text-align: center;
  margin-bottom: 5px;
  position: relative;
}
.wrapper span {
  position: absolute;
  right: -60px;
  bottom: 10px;
  background-color: lightblue;
  color: black;
  font-size: 12px;
  padding: 8px 16px;
  opacity: 0;
}
＆＃13;
<script src="https://d3js.org/d3.v3.min.js"></script>
<div class="wrapper">
  <div class="add">
    Add
    <span class="message"></span>
  </div>

  <div class="add">
    Add
    <span class="message"></span>
  </div>

  <div class="add">
    Add
    <span class="message"></span>
  </div>

  <div class="add">
    Add
    <span class="message"></span>
  </div>

  <div class="add">
    Add
    <span class="message"></span>
  </div>

</div>
＆＃13;
＆＃13;
＆＃13;

Answer 1

以下是我编码的方法：

d3.selectAll(".add")
    .on("click", function() {
      var m = d3.select(this.children[0]);
      m.text("added")
        .style("opacity", 1);
      m.transition()
        .delay(500)
        .duration(1000)
        .style("opacity", 0);
   });

运行：

d3.selectAll(".add")
  .on("click", function() {
    var m = d3.select(this.children[0]);
    m.text("added")
      .style("opacity", 1);
    m.transition()
      .delay(500)
      .duration(1000)
      .style("opacity", 0);
  })

.wrapper {
  display: inline-block;
  margin: 50px;
  width: 200px;
}
.wrapper div {
  padding: 16px 32px;
  background-color: grey;
  color: #FFF;
  font-family: sans-serif;
  cursor: pointer;
  text-align: center;
  margin-bottom: 5px;
  position: relative;
}
.wrapper span {
  position: absolute;
  right: -60px;
  bottom: 10px;
  background-color: white;
  color: black;
  font-size: 12px;
  padding: 8px 16px;
  opacity: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div class="wrapper">
  <div class="add">
    Add
    <span class="message"></span>
  </div>

  <div class="add">
    Add
    <span class="message"></span>
  </div>

  <div class="add">
    Add
    <span class="message"></span>
  </div>

  <div class="add">
    Add
    <span class="message"></span>
  </div>

  <div class="add">
    Add
    <span class="message"></span>
  </div>

</div>