Question

我想在d3中制作一个简单的动画（我是新手）。我已经做了一个词云演示，我希望它能够飞到＆＃34; （页面打开时，从左到右，然后在中心的小移动）。

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 flyin

1 个答案: