D3 Добавление текста в SVG Rectangle

Question

Я ищу, чтобы добавить html на прямоугольник в D3, чтобы дать мне подсказку с несколькими линиями. Нижняя часть - это то, как я добавляю прямоугольник, который может быть частью проблемы. Верх - это код, который должен работать в моем мире.

newRect.().html(" <textArea font-family=Verdana font-size=20 fill=blue > Test " + "</br>" + "Test2 </textArea>"); 

Что делает вставки текстового поля в SVG, он просто не отображает:
HTML:

<rect id="rectLabel" x="490" y="674" width="130" height="160" fill="red"> 
    <textarea fill="blue" font-size="20" font-family="Verdana"> Test </br>Test2 </textarea> 
</rect> 

У меня есть курсор функции, которая выполняет следующие действия:

newRect = svg.append("rect") 
    .attr("x", xCor) 
    .attr("y", yCor) 
    .attr("width", 130) 
    .attr("height", 160) 
    .attr("fill", "red") 
    .attr("id", "rectLabel"); 

Я думаю, что я должен делать это, но он не работает. Он просто удаляет g.node, к которому я пытаюсь добавить.

newRect = $(this).enter().append("rect") 
    .attr("x", xCor) 
    .attr("y", yCor) 
    .attr("width", 130) 
    .attr("height", 160) 
    .attr("fill", "red") 
    .attr("id", "rectLabel"); 

Вопрос: Почему не мой текст появляется? Ive попробовал .html, .textArea. Я хочу многострочный ярлык, поэтому я не думаю, что .text будет работать правильно? Кроме того, как я должен добавлять прямоугольник?

Answer 1

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

Многоканальный этикетки также немного сложнее, вы можете проверьте это wrap function.

Answer 2

Вы пробовали элемент SVG text?

.append("text").text(function(d, i) { return d[whichevernode];}) 

rect элемент не позволяет текста элемента внутри него. Это позволяет использовать только описательные элементы (<desc>, <metadata>, <title>) и элементы анимации (<animate>, <animatecolor>, <animatemotion>, <animatetransform>, <mpath>, <set>)

Добавить текстовый элемент как родной брат и работать над позиционированием.

UPDATE

Использование г группировку, как о чем-то вроде этого? fiddle

Вы можете, конечно, переместить логику в класс CSS можно добавить запись, удалять из группы (this.parentNode)