如何在D3中动画文本锚

how to animate text anchor in D3

本文关键字：动画 文本 D3      更新时间：2023-09-26

我正在尝试将单词云转换为单词列表。我已经设法做到了，但遇到了动画文本的问题。因为词云使用text-anchor: middle进行文本定位，当我切换到使用text-anchor: start的列表布局时，当动画开始时，单词会出现一些尖峰。参见下面的代码:

jsFiddle 

text.transition()
    .duration(1000)
    .attr("text-anchor", opts.textAnchor)
    .attr("transform", function(d) {
         return "translate(" + [d.x, d.y] + ")";
     })
     .style("font-size", function(d) {
          return d.size + "px";
     })

我认为，我应该手动计算每个文本位置，并创建自己的居中文本，而不是text-anchor: middle。但我不知道该怎么做。

如有任何帮助，不胜感激

最好的方法确实是自己居中文本，而不是使用和动画text-anchor。这相对简单，你只需要确定文本的宽度并将其偏移一半长度到中心:

.attr("dx", function() {
  if(opts.textAnchor == "start") {
    return 0;
  } else if(opts.textAnchor == "middle") {
    return -this.getBBox().width/2 + "px";
  }
})
相关文章：