D3 Appending Text to a SVG Rectangle

Question

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    lt textArea font-family Verdana font-size 20 fill blue  gt  Test       lt  br gt      Test2  lt  textArea gt       Which does insert a text field into the SVG  it just doesn t display  HTML    lt rect id  rectLabel  x  490  y  674  width  130  height  160  fill  red  gt       lt textarea fill  blue  font-size  20  font-family  Verdana  gt  Test  lt  br gt Test2  lt  textarea gt   lt  rect gt    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

User · 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

User · Answer

Have you tried the SVG text element    append  text   text function d  i    return d whichevernode       rect element doesn t permit text element inside of it  It only allows descriptive elements   lt desc gt    lt metadata gt    lt title gt   and animation elements   lt animate gt    lt animatecolor gt    lt animatemotion gt    lt animatetransform gt    lt mpath gt    lt set gt    Append the text element as a sibling and work on positioning   UPDATE  Using g grouping  how about something like this  fiddle  You can certainly move the logic to a CSS class you can append to  remove from the group  this parentNode

[javascript] D3 Appending Text to a SVG Rectangle

Examples related to javascript

Examples related to svg

Examples related to d3.js