javascript - 为什么 .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. 单击“添加”按钮时，将显示所有消息，而不是单击按钮旁边的消息。我使用 .each 的方式有问题吗？

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

非常感谢任何帮助。

片段

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

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

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

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>