D3 Добавление текста в прямоугольник SVG

Я хочу добавить 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 будет работать правильно? Кроме того, как я должен добавлять прямоугольник?

Ответ 1

A 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

Многострочные метки также немного сложны, вы можете проверить эту функцию обертки.

Ответ 2

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

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

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

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

UPDATE

Используя g группировку, как насчет чего-то подобного? скрипка

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