d3 动画 wordCloud 飞来飞去

Question

我正在尝试在 d3 中制作一个简单的动画（我是新手）。我做了一个词云演示，我会在页面打开时喜欢"fly in"（从左到右然后在中心的小移动）。

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

d3 动画 wordCloud 飞来飞去

d3 animation wordCloud flyin

javascript

svg

d3.js