rect
не может содержать text
элемент. Вместо этого преобразуйте g
элемент с местоположением текста и прямоугольника, затем добавьте и прямоугольник и текст к нему:
var bar = chart.selectAll("g")
.data(data)
.enter().append("g")
.attr("transform", function(d, i) { return "translate(0," + i * barHeight + ")"; });
bar.append("rect")
.attr("width", x)
.attr("height", barHeight - 1);
bar.append("text")
.attr("x", function(d) { return x(d) - 3; })
.attr("y", barHeight / 2)
.attr("dy", ".35em")
.text(function(d) { return d; });
http://bl.ocks.org/mbostock/7341714
Многострочные маркировки также немного хитры, Вы могли бы хотеть проверить, это переносит функцию .
Вы попробовали текст SVG элемент?
.append("text").text(function(d, i) { return d[whichevernode];})
реагируют , элемент не разрешает текст элемент в нем. Это только позволяет описательные элементы (<desc>, <metadata>, <title>
), и элементы анимации (<animate>, <animatecolor>, <animatemotion>, <animatetransform>, <mpath>, <set>
)
Добавляют текстовый элемент как одноуровневый элемент и работу над расположением.
ОБНОВЛЕНИЕ
Используя группировка g, как насчет чего-то вроде этого? скрипка
можно, конечно, переместить логику в класс CSS, к которому можно добавить, удалить из группы (this.parentNode)