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. узел, который я пытаюсь добавить.
newRect = $(this).enter().append("rect")
.attr("x", xCor)
.attr("y", yCor)
.attr("width", 130)
.attr("height", 160)
.attr("fill", "red")
.attr("id", "rectLabel");
вопрос: Почему мой текст не появляется? - Я пытался .формат HTML. ,элемент textarea. Мне нужна метка с несколькими строками, поэтому я не думаю .текст будет работать правильно? Кроме того, как я должен добавлять прямоугольник?
2 ответа:
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
многострочные этикетки также немного сложнее, вы можете проверить это функции обернуть.
вы пробовали SVG текст элемент?
.append("text").text(function(d, i) { return d[whichevernode];})
rect элемент не разрешает текст элемент внутри него. Это позволяет только описательные элементы (
<desc>, <metadata>, <title>
) и анимацию (<animate>, <animatecolor>, <animatemotion>, <animatetransform>, <mpath>, <set>
)добавить текстовый элемент в качестве родного брата и работать над позиционированием.
обновление
используя g группировка, как насчет чего-то вроде этого? скрипка
вы можете, конечно, переместить логику в класс CSS, который вы можете добавить, удалить из группы (это.parentNode)