javascript - 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;
                 } );