文字水平条形图上 - D3

Question

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

Answer 1

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

Answer 2

这不是做一个简单的事情。你将不得不

• 添加文本。
• 确定使用.getBBox()或类似的东西它的实际尺寸。
• 删除文本。
• 拆分取决于其实际宽度和所述条的宽度的文本转换成单独的段（例如tspan多个）。
• 添加具有相应样式的段。

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