d3动画wordcloud flyin

Question

我想在d3中制作一个简单的动画（我是新手）。我做了一个词云演示文稿，当页面打开时，我会喜欢它“飞入”（从左到右，然后居中）的小动作。

var text = d3.select("body").append("svg") 
      .attr("width", 1200) 
      .attr("height", 800) 
      .append("g") 
      .attr("transform", "translate(550,300)") 
      .selectAll("text") 
      .data(words) 
      .enter().append("text") 
      .style("font-size", function(d) { return d.size + "px"; }) 
      .style("font-family", "Impact") 
      .style("fill", function(d, i) { return fill(i); }) 
      .attr("text-anchor", "middle") 
      .style("text-anchor", "middle") 
      .attr("transform", function(d) { 
       return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")"; 
      }) 
      .text(function(d) { return d.text; }); 

Answer 1

您需要做的就是将初始位置设置为离开页面向左，然后向期望的结束位置添加转换。例如：

d3.select("svg > g") 
    .attr("transform", "translate(-550,300)") 
    .transition() 
    .attr("transform", "translate(550,300)");