Question

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

Answer 1

这不是一件容易的事。你必须

添加文字。
使用.getBBox()或类似内容确定其实际尺寸。
删除文字。
根据文本的实际宽度和条形宽度，将文本拆分为不同的细分（例如tspan）。
添加具有相应样式的细分。

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

Answer 2

我设法使用两个文本标签。顶部标签包裹在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");

水平条形图上的文字 - d3

2 个答案: