Text-Wrapping in D3

[jose banks]

I've been researching for a while about text-wrapping, but a lot of them involve using css to text wrap?

Is there any way that I can use D3 to text wrap something like this: 

      p.append("text")

       .attr("transform", "translate(-20, -30)")

       .text("Relevance")

       .style("font", "bold 12px Arial")

;

[Ian Johnson]

there are a couple threads about this in the list which you can search from the google groups page.

the technique i'm most familiar with is using tspans and setting the x and dy attributes when needed. so you can wrap each word with a tspan and then calculate if the width of the text is too long, if it is set the tspan to be x=0 and dy= whatever your line height is.

you can find more detail in the other threads

--
Ian Johnson

http://enja.org

[Chris Viau]

You could let html wrap to a div through foreignObject

On Fri, Nov 16, 2012 at 1:00 PM, jose banks <kauz...@gmail.com> wrote:

[jose banks]

Thanks for the advice guys! Is it possible to use transform: 

var fo = svg.append("svg:foreignObject")

             .attr("width", 100)

             .attr("height", 200)

    fo.append("xhtml:body")

      .html("hello my name is jose how long is this??????")

      .style("font", "bold 12px Arial")

    fo.append("path")

      .attr("transform", "translate(90,200)")

For some reason it doesnt move it at all

[jose banks]

Ah! No worries, for some reason I put .append("path") . Just removed it!

[Guerino1]

Hi,

Is there a link to the final code so we can see how this works?  I'm trying to mimic the methodology but I'm running into issues and would like to see a working example of this.

The difference in my example is that I'm trying turn the text into an HTML link, as well.

The full example is at Tree With Wrapped Node Text.  Here's my current code block...

	  nodeEnter.append("svg:foreignObject")
	      .attr("width", "50")
	      .append("xhtml:body")
	      .attr("xmlns", "http://www.w3.org/1999/xhtml")
	      .append("svg:div").attr("class", "NODE_LABEL_DIV")
	      .append("svg:a")
              .attr("xlink:href", function(d) { return d.hlink; })
	      .append("text")
              .text(function(d) { return d.name; })
              .attr("x", function(d) { return d.children || d._children ? horizontalNodeOffset : horizontalNodeOffsetLeaf; })
              .attr("dy", "-10")
              .attr("fill", "Blue")
              .attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; })
              .style("fill-opacity", 1e-6);

Instead of the text being part of the HTML "a" element, it shows up as a separate appended "text" element.

Thanks