我正在尝试将词云转换为词表。我已经做到了，但是在动画文本上遇到了问题。因为词云text-anchor: middle用于文本定位，所以当我切换到使用的列表布局时，text-anchor: start随着动画开始，词会有点尖峰。请参阅下面的小提琴和相关代码：
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";
}
})
在此处完成演示。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句