javascript - 使用 D3.js 计算带有字母间距的文本长度

Question

当我计算文本路径元素的文本长度时，当我以不同方式设置“字母间距”样式时，该值不会改变。

有没有办法处理由于额外间距而导致的额外长度？

目前，我计算文本长度以隐藏双层分区图上的一些标签:

textsElements
.attr("dy", function(d) {
  var offset = (radius / strokeWidth)/2;
  var rotation = getRotationDeg(d)
  return rotation > 0 && rotation < 180 ?  -offset : offset;
})
.append("textPath")
.attr("startOffset", "50%")
.attr("class","labels-text")
.style("text-anchor", "middle")                 
.attr("xlink:href", function (d) { return '#' + createTextPathId(d); })
.text(function (d) { return d.name; });
// Hide labels that are to long 
textsElements.each(function(d){
  var el = d3.select(this);
  d.labelToLong= false;
  if(( d.hiddenArcLength - this.getComputedTextLength()) < 5) {
    el.style("opacity",0);
    d.labelToLong = true;
  }
}); 



 textpath.labels-text {letter-spacing: 1px;}

Answer 1

事实上，getCompulatedTextLength() 忽略了字母空格。

您可以尝试使用getBBox():

textsElements.each(function(d){
  var el = d3.select(this);
  d.labelToLong= false;
if(( d.hiddenArcLength - this.getBBox().width) < 5) {
  el.style("opacity",0);
  d.labelToLong = true;
 }
}); 

不幸的是，这对您没有帮助，因为您处理的是倾斜路径，而不是水平文本。因此，您可以尝试根据您的字距调整使用给定值调整 getCompulatedTextLength:

textsElements.each(function(d){
  var el = d3.select(this);
  var tweak = 1.2;//you can make this value >1 or <1, according to the kerning
  d.labelToLong= false;
if(( d.hiddenArcLength - this.getComputedTextLength()*tweak) < 5) {
  el.style("opacity",0);
  d.labelToLong = true;
 }
});