水平条形图上的文本 - d3

Text on horizontal bar chart - d3

本文关键字：d3 文本 条形图 水平      更新时间：2023-09-26

我有一个水平条形图，上面显示字段名称。如果名称（文本）超过栏，文本必须是黑色的，如下所示。我该怎么做？

我已经设法使用两个文本标签来做到这一点。顶部标签用 svg 包裹，因此可以夹住其长度。这是工作示例 - http://jsfiddle.net/cuckovic/C6SSj/

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");
这不是

一件小事。你将不得不

  • 添加文本。
  • 使用.getBBox()或类似的东西确定其实际尺寸。
  • 删除文本。
  • 将文本拆分为单独的句段（例如 tspan s） 取决于其实际宽度和条形宽度。
  • 添加具有相应样式的这些段。

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

相关文章：