Javascript 使用D3.js计算文本长度和字母间距

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

有没有办法处理由于额外间距而产生的额外长度

目前，我计算textlength以隐藏双层分区图上的一些标签：

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;}

textsElements
.attr（“dy”，函数（d）{
变量偏移=（半径/冲程宽度）/2；
变量旋转=getRotationDeg（d）
返回旋转>0和旋转<180？&偏移：偏移；
})
.append（“textPath”）
.attr（“startOffset”，“50%”）
.attr（“类”、“标签文本”）
.style（“文本锚定”、“中间”）
.attr（“xlink:href”，函数（d）{return'#'+createTextPathId（d）；}）
.text（函数（d）{返回d.name；}）；
//隐藏过长的标签
textsElements.each（函数d）{
var el=d3。选择（此项）；
d、 labelToLong=false；
如果（（d.hiddenArcLength-this.getComputedTextLength（））<5）{
el.样式（“不透明度”，0）；
d、 labelToLong=true；
}
}); 
textpath.labels-text{字母间距：1px；}

事实上，

getComputedTextLength（）

正在忽略字母空格

您可以改为尝试

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;
 }
}); 

---

实际上，

getComputedTextLength（）

忽略了字母空格

您可以改为尝试

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;
 }
});