Looking for examples of automatic text-wrapping, based on resizing of Rectangle or Polygon

[Guerino1]

Hi,

Does anyone know where I can find good examples of text-wrapping that occurs when a shape like a "rect" or "polygon" get resized?

For example, I'd like to draw a rectangle that has text in it.  As the rectangle web page narrows, I'd like the text to auto-wrap within that rectangle and the rectangle to grow vertically so it adjusts to the number of lines of text.

Thanks for any help you can offer.

FG

[Chris Viau]

This is so much easier to do in html, so I usually superimpose a div. It's possible to use foreignobject instead, but it can be very buggy. http://tributary.io/inlet/5320723
You could also start from the multiple plugins for text wrapping in SVG

https://github.com/d3/d3/issues/1642
https://plnkr.co/edit/YBCAc3?p=preview
http://d3plus.org/examples/utilities/a39f0c3fc52804ee859a/

The only part missing is getting the bbox after the text is wrapped to set the height of the box.

ChrisV

[Curran]

Hello,

Here are some examples of SVG text wrapping using d3-plus. The text wrapping module is available at github.com/d3plus/d3plus-text .

Best regards,

Curran

Datavis.tech

[Frank Guerino]

Hi Chris,

Thanks!  This sounds very interesting.  I've already modified Mike's wrapping function in this SDLC Chevron InfoGraphic but I don't like that I can't HTML format the text within each tspan element.  I'm going to take a look at superimposing divs.  Hopefully, I can get them to resize with the svg elements (which is my next challenge).

FG

--
You received this message because you are subscribed to the Google Groups "d3-js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to d3-js+un...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Frank Guerino]

Hi Curran,

Thank you.  This is one of the examples I've been using.  You can see my implementation in this SDLC Chevron InfoGraphic.  Not perfect but it's coming along.

FG