Javascript 水平条形图上的文字-d3

我有一个水平条形图，上面显示了字段名。如果名称文本超出了该条，则文本必须为黑色，如下所示。我该怎么做呢？

这不是一件小事。你必须

添加文本。 使用.getBBox或类似工具确定其实际尺寸。 删除文本。 根据文本的实际宽度和条形图的宽度，将文本拆分为单独的部分，例如t平移。 添加具有相应样式的线段。

---

也就是说，您必须手动将文本分解为需要不同样式的部分，然后分配这些样式。

这不是一件小事。你必须

添加文本。 使用.getBBox或类似工具确定其实际尺寸。 删除文本。 根据文本的实际宽度和条形图的宽度，将文本拆分为单独的部分，例如t平移。 添加具有相应样式的线段。

---

也就是说，您必须手动将文本拆分为需要不同样式的部分，然后分配这些样式。

我已经使用两个文本标签完成了这项工作。顶部标签用svg包装，因此它会剪裁其长度。以下是工作示例-

---

我用两个文本标签成功地做到了这一点。顶部标签用svg包装，因此它会剪裁其长度。以下是工作示例-

---

你能给我举个例子吗？没有一个例子能确切说明你的要求，但这是一个使用边界框的教程，是关于这个主题的问题。你能给我举个例子吗？没有一个例子能确切说明你的要求，但这是一个使用边界框的教程，是关于这个主题的问题。

bar.append("text")
    .attr("class", "below")
    .attr("x", 12)
    .attr("dy", "1.2em")
    .attr("text-anchor", "left")
    .text(function(d) { return d.sharedLabel; })
    .style("fill", "#000000");


bar.append("rect")
    .attr("class", "malebar")
    .attr("height", barWidth-gap)
    .attr("x", 10);



bar.append("svg")
    .attr({
        height: barWidth-gap
    })
    .append("text")
    .attr("class", "up")
    .attr("x", 12)
    .attr("dy", "1.2em")
    .attr("text-anchor", "left")
    .text(function(d) { return d.sharedLabel; })
    .style("fill", "#ffffff");