Set Text Width Or Put Text In A Div

I would like to be able to set the width of a text element in D3. For now I have some text in a circle but I cannot set the width of this element. (let's say that nodeEnter is a no

Solution 1:

If you want automatic line wrapping, foreignObject with a div is the way to go. The problems you mention can be fixed relatively easily. While you're setting myCSS for the svg element, you're not setting it for the div. If you add the line to set the CSS class after appending the div, it should pick up the settings.

The easiest way to center the text is probably to set the size of the div to touch the edges of the circle and add the CSS to center the text within the div.

Solution 2:

If you're just creating circles, you could always just use regular HTML elements to create the circles and absolute positioning to position them.

http://jsfiddle.net/FPkxV/

HTML:

<p><span></span><span>This is some text which will wrap if it gets too long!</span></p>​

CSS:

* { margin: 0; padding: 0; }
body { font: 10px sans-serif; }
p { 
    background: red;
    text-align: center;
    border-radius: 50px; 
    width: 100px; 
    height: 100px; }
pspan { 
    vertical-align: middle;
    display: inline-block; }
pspan:first-child { height: 100px; }

This also has the advantage of being supported on IE7 and IE8.