Текст на горизонтальной гистограмме - 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 s) в зависимости от его фактической ширины и ширины панели.
• Добавьте эти сегменты с соответствующими стилями.

То есть вам придется вручную разбить текст на части, которые вы хотите использовать для разных стилей, а затем назначьте эти стили.