Question

-1

D3 Appending Text to a SVG Rectangle

rated 0 times [ 1] [ 2] / answers: 1 / hits: 188749 / 11 Years ago, tue, december 17, 2013, 12:00:00

I'm looking to append html onto a rectangle in D3 to give me a multiple line tooltip. The bottom part is how I'm adding a rectangle which may be part of the problem. The top is the code that should work in my world.

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

Which does insert a text field into the SVG, it just doesn't display:

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>

I have a mouse over function which runs the following:

    newRect = svg.append(rect)

    .attr(x, xCor)

    .attr(y, yCor)

    .attr(width, 130)

    .attr(height, 160)

    .attr(fill, red)

    .attr(id, rectLabel);

I think I should be doing this but it doesn't work. It just removes the g.node that I'm trying to append to.

    newRect = $(this).enter().append(rect)

    .attr(x, xCor)

    .attr(y, yCor)

    .attr(width, 130)

    .attr(height, 160)

    .attr(fill, red)

    .attr(id, rectLabel);

Question:
Why doesn't my text appear? Ive tried .html, .textArea. I want a multiple line label so I don't think .text will work correct? Also, how should I be appending the rectangle?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

roberts

Add To Favorites

Follow

Total Points: 212

Total Questions: 101

Total Answers: 101

Location: Philippines

Member since Thu, Apr 14, 2022

2 Years ago

answered 11 Years ago frederickmohamedw · Accepted Answer

A rect can't contain a text element. Instead transform a g element with the location of text and rectangle, then append both the rectangle and the text to it:

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

Multi-line labels are also a little tricky, you might want to check out this wrap function.