如何在D3中为文本锚点添加动画效果

Question

如何在D3中为文本锚点添加动画效果

4

我尝试将词云转换为单词列表。我已经成功地完成了转换，但是在文本动画时遇到了问题。由于词云使用 text-anchor: middle 来定位文本，当我切换到使用 text-anchor: start 的列表布局时，单词会在动画开始时稍微抖动。请参见下面的 fiddle 和相关代码：

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。但我不确定如何做到这一点。

任何帮助将不胜感激。

- Cihad Turhan

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Lars Kotthoff · Accepted Answer

实现文本居中的最好方法是手动居中而不使用和操纵text-anchor。这样做相对容易，您只需确定文本的宽度并将其偏移一半来居中：

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

完整演示在这里。