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)");