Question

我试图将文字云转换为单词列表。我设法做了但是在动画文字方面遇到了问题。因为词云使用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。但我不确定该怎么做。

任何帮助将不胜感激

Answer 1

最好的办法是让自己居中，而不是使用动画text-anchor。这相对简单，您只需确定文本的宽度并将其偏移该长度的一半到中心：

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

完整演示here。

如何在D3中为文本锚点设置动画

1 个答案: