Почему .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"); 
    }) 
    }) 

У меня 2 вопроса:

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>