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,你需要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;
                 } );