D3で.each（）が動作しないのはなぜですか？

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>