D3.js text enter (within svg) transition opacity 0 to 1 won't end at 1

Question

I am trying to have my text enter selection transition opacity from 0 to 1 with the following code. Without the transition and opacity setting, text appears as expected.

But with this code, opacity starts at 0 but never becomes 1; and text value does not get added? [All other transitions in my code work as expected].

/**
   * @param text
   *           selection with data to add text from & truncate by, with a
   *           delay.
   */
  function addBubbleTextByData ( text ) {
     text.style( "opacity", 0 ).transition().delay( 1.1 * transitionDelay )
           .style( "opacity", 1 ).text(
                 function ( bubbleDatum ) {
                    var bubbleDatumText = ""; // for bubbles too small for any text
                    if ( bubbleDatum.r > 15 ) {
                       // Bubble is large enough to fit text
                       bubbleDatumText = bubbleDatum[JSON_NAME_KEY].toString().substring( 0,
                             bubbleDatum.r / 4 );
                    }

                    return bubbleDatumText;
                 } );
  }

Answer 1

If it's an SVG, you will need to mod fill-opacity.

text.attr( "fill-opacity", 0 ).transition().delay( 1.1 * transitionDelay )
           .attr( "fill-opacity", 1 ).text(
                 function ( bubbleDatum ) {
                    var bubbleDatumText = ""; // for bubbles too small for any text
                    if ( bubbleDatum.r > 15 ) {
                       // Bubble is large enough to fit text
                       bubbleDatumText = bubbleDatum[JSON_NAME_KEY].toString().substring( 0,
                             bubbleDatum.r / 4 );
                    }

                    return bubbleDatumText;
                 } );