D3.jsで不透明度とテキストを操作する

Question

ドットチェインとD3を使用してdivをテキストに変更する関数を記述しようとしています。

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

：

私は、私の外側のdivを選択し、0には、不透明度の移行、内部のdivを選択し、テキストを変更し、1に戻って、外側のdivを移行したいだから全体の事は次のようになります

これを行うには、より良い方法があるはずです。これら2つの選択肢を組み合わせる方法はありますか？理想的には、私はこれをすべて1つの機能にして、それに応じて呼び出すだけです。

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>

それは不可能なので、 `` 移行を除去するために、あなたの