Question

我知道如何使用opacity属性在转换中进行正常淡入淡出，但是如何从元素的一端开始转换并逐渐逐渐完成？

这样的事情：

我正在尝试为某些文字执行此操作：

text = svg.selectAll(".myText")
          .data(myData)
          .enter()
          .append("text")
          .attr("class", "myText")
          .attr("text-anchor", "start")
          .attr("fill-opacity", 0)
          .text(function (d)
          {
              return d.message
          });

text.transition()
    .delay(500)
    .duration(1000)
    .attr("fill-opacity", 1)

Answer 1

纯CSS答案

您可以在此处查看如何使用纯CSS执行此操作： CSS fade left to right

D3方法

以下是链接答案中给出的相同方法，仅将其应用于D3 ...

要点是在文本上放置一个框，并使用过渡来修改框宽（从完全覆盖文本到完全显示它）。

为防止框边缘可见且过于刺眼，请使用渐变。
为了确保框能够很好地覆盖文本，覆盖矩形使用函数getBBox()

var height = 25,
    width = 100;

d3.select('div').append('svg')
        .attr('width', '100%')
        .attr('viewBox', "0 0 " + width + " " + height)
        .attr('style', 'border: solid 1px green')
        .append('g')
        .attr('transform','translate('+ width/2 +','+ height/2 +')')
        .attr('id', 'main');

var text = d3.select('#main').append('text')
             .attr('class', 'myText')
             .attr('text-anchor', 'middle')
             .attr('alignment-baseline','middle') 
             .text('My Message');

bbox = text[0][0].getBBox();

var gradient = d3.select('svg').append("defs")
  .append("linearGradient")
    .attr("id", "gradient")
    .attr("x1", "0%")
    .attr("x2", "0%")
    .attr("spreadMethod", "pad");

gradient.append("stop")
    .attr("offset", "0%")
    .attr("stop-color", "#fff")
    .attr("stop-opacity", 1);

gradient.append("stop")
    .attr("offset", "100%")
    .attr("stop-color", "#fff")
    .attr("stop-opacity", 0);

fadeBox = d3.select('#main').append('rect')
  .attr('x', bbox.x)
  .attr('y', bbox.y)
  .attr('width', bbox.width)
  .attr('height', bbox.height)
  .style("fill", "url(#gradient)");



fadeBox.transition()
  .delay(500)
  .duration(2000)
  .attr('width', 0)
  .attr('x', bbox.width)


gradient.transition()
  .delay('500')
  .duration('2000')
  .attr('x1','100%')

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

<div>

</div>

Answer 2

很酷的问题。这种疯狂怎么样：

＆＃13;

<!DOCTYPE html>
<html>

  <head>
    <script data-require="d3@3.5.3" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script>
  </head>

  <body>
    <script>
    
      var str = "This is a long string.",
          i = 0;
    
      var svg = d3.select("body")
        .append("svg")
        .attr("width", 500)
        .attr("height", 300);
        
      var text = svg.append("text")
        .style("fill", "black")
        .style("font-size", "30pt")
        .style("font-family", "arial")
        .attr("transform", "translate(10,50)");
        
      fadeLeftToRight();
        
      function fadeLeftToRight(){
        i++;
        if (i >= str.length) return;
        
        var char = str.substring(i-1,i);
        text
          .append("tspan")
          .style("opacity", 0)
          .text(char)
          .transition()
          .delay(100)
          .duration(char === " " ? 0 : 500)
          .style("opacity", 1)
          .each("start", function(d){
            fadeLeftToRight();
          })
      }
      
    </script>
  </body>

</html>

＆＃13;

使用d3从一侧到另一侧的水平淡入过渡？

2 个答案:

纯CSS答案

D3方法