D3.js文本输入（在svg内）过渡不透明度0到1赢得结束于1

Question

我正在尝试让我的文本使用以下代码将选择过渡不透明度从0输入到1。 如果没有过渡和不透明度设置，文本将按预期显示。但是使用此代码，不透明度从0开始但从不变为1;和文本值没有添加？ [我的代码中的所有其他转换按预期工作。]

有什么想法吗？非常感谢！

/**
   * @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

如果是SVG，则需要修改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;
                 } );