兄弟要素の遷移が

Question

を終了したときに別の要素を追加は、私はそうのような矩形要素の高さをアニメーション化するトランジションを使用してい棒グラフを、持っている：

//Create a layer for each category of data that exists, as per dataPointLegend values 
//e.g. DOM will render <g class="successful"><g> 
layers = svg.selectAll('g.layer') 
    .data(stacked, function(d) { 
     return d.dataPointLegend; 
    }) 
    .enter() 
    .append('g') 
    .attr('class', function(d) { 
     return d.dataPointLegend; 
    }) 
    //transform below is used to shift the entire layer up by one pixel to allow 
    //x-axis to appear clearly, otherwise bars inside layer appear over the top. 
    .attr('transform', 'translate(0,-1)'); 

//Create a layer for each datapoint object 
//DOM will render <g class="successful"><g></g><g> 
barLayers = layers.selectAll('g.layer') 
    .data(function(d) { 
     return d.dataPointValues; 
    }) 
    .enter() 
    .append('g'); 

//Create rect elements inside each of our data point layers 
//DOM will render <g class="successful"><g><rect></rect></g></g> 
barLayers 
    .append('rect') 
    .attr('x', function(d) { 
     return x(d.pointKey); 
    }) 
    .attr('width', x.rangeBand()) 
    .attr('y', height - margin.bottom - margin.top) 
    .attr('height', 0) 
    .transition() 
    .delay(function(d, i) { 
     return i * transitionDelayMs; 
    }) 
    .duration(transitionDurationMs) 
    .attr('y', function(d) { 
     return y(d.y0 + d.pointValue); 
    }) 
    .attr('height', function(d) { 
     return height - margin.bottom - margin.top - y(d.pointValue) 
    }); 

私は、テキストを追加するために使用され、さらに選択をしています要素

すべての矩形の高さが伸びた後、テキスト要素がうまくフェードします。私が疑問に思ったのは、それぞれのバーがトランジションを終了すると、対応するレイヤーにテキスト要素を追加できるかどうかでしたか？

私はSOこれに答えを見てきました - 私は後の午前何のラインに沿うように見えますShow text only after transition is complete d3.js

、私はそう

.each('end', function(d){ 
    barLayers 
     .append('text') 
     .text(function() { 
      return d.pointLabel 
     }) 
     .attr('x', function() { 
      return x(d.pointKey) + x.rangeBand()/2; 
     }) 
     .attr('y', function() { 
      var textHeight = d3.select(this).node().getBoundingClientRect().height; 
      //Position the text so it appears below the top edge of the corresponding data bar 
      return y(d.y0 + d.pointValue) + textHeight; 
     }) 
     .attr('class', 'data-value') 
     .attr('fill-opacity', 0) 
     .transition() 
     .delay(function(d, i) { 
      return i * transitionDelayMs + transitionDurationMs; 
     }) 
     .duration(transitionDurationMs) 
     .attr('fill-opacity', 1); 

}); 

のように私の矩形描画サイクルで.each('end',...)を追加してみましたしかし私はtextの多くの要素を持っていて、私のデータポイントごとに一つのrectを保持している私のgのそれぞれになります。

私は近いんだように感じるが、あなた賢明な人々:)

おかげで、あなたの選択内のすべての要素について、それぞれの内部に別途

Answer 1

whateverTheSelectionIs  
.each('end', function(d){ 
     barLayers 
      .append('text') 

.each実行します」から、いくつかの援助を必要としますすべてのbarLayer（barLayers）にテキスト要素を追加します。したがって、全体的に追加されたテキスト要素の数（barLayers.size（）* selection.size（））を取得します。右のbar/gにそれぞれ1つのテキスト要素を追加する必要があります。

以下は、機能するかもしれないファッジです。追加したいテキストが.each関数を呼び出すセレクションの兄弟であるため、d3.select（this.parentNode）はrectの親に移動する必要があります。右のbarLayer。

whateverTheSelectionIs  
.each('end', function(d,i){ 
     d3.select(this.parentNode) 
      .append('text')