35915

Set text width or put text in a div

Question:

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 node in my graph)

nodeEnter.append("circle") .attr("r", function(d){return d.radius+"px";}); /* Add text in middle of circle */ nodeEnter.append('text') .text("this is a very long text");

What I would like is to find a simple way of setting the width of that text element (with the overflow going down, as in a simple div). The way I have right now is the following:

nodeEnter.append("circle") .attr("r", function(d){return d.radius+"px";}); /* Add text in middle of circle */ nodeEnter.append("foreignObject") .attr("width", 130) .attr("height", 200) .attr("class", "myCSS") .append("xhtml:div") .html("this is a very long text");

However I don't think that it is the best solution, for example everything I set in myCSS is overwriten. Moreover I don't know how to center the foreign Object in the circle (especially on the x axis).

Thanks in advance for your help.

Answer1:

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.

Answer2:

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

<a href="http://jsfiddle.net/FPkxV/" rel="nofollow">http://jsfiddle.net/FPkxV/</a>

HTML:

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

CSS:

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

This also has the advantage of <a href="http://caniuse.com/#cats=SVG" rel="nofollow">being supported on IE7 and IE8.</a>

Recommend

  • Displaying DIV inside a Canvas clipping path
  • Dictionary intellisense
  • Html content on canvas
  • Getting to certain member using datapager and datagrid
  • Firebase multi-location update overwriting instead of updating value
  • Continue if element is not visible in protractor
  • Using target on div without a href
  • Is it possible to extract table infomation using Apache Tika?
  • Updating one element of a bound Observable collection
  • JSF2.0 + Primefaces 3.0.1 + jquery 1.6.4 + p:commandLink + IE8 throws Unexpected call to method or p
  • How to remove all of a jQuery UI dialog when it is closed
  • Parenthesis() and SQL Query Performance
  • Responsive Form on top of Responsive Image? - Bootstrap
  • Extending the Django 1.11 User Model
  • How to Model Ternary Relationship in CakePhp?
  • Are there any side effects from calling SQLAlchemy flush() within code?
  • jQuery - resize an elements height to match window without refreshing, on window resize
  • Flex items with same property values are rendering in different sizes
  • chrome video src change not working
  • WPF Template Binding in ToggleButton UserControl
  • blade.php method outputting it's result to the form
  • Update Google Maps traffic layer without page reloading
  • Floated image with variable width and heading with background image
  • Can't delete or rename original file after resizing
  • D3 get axis values on zoom event
  • Installing iPhone App to iPhone
  • OpenGL 3.3 on Mac OSX El Capitan with LWJGL
  • Deselecting radio buttons while keeping the View Model in synch
  • Why HTML5 Canvas with a larger size stretch a drawn line?
  • Excel - Autoshape get it's name from cell (value)
  • How to set/get protobuf's extension field in Go?
  • Check if a string to interpolate provides expected placeholders
  • How to show dropdown in excel using jrxml (jasper api)?
  • RestKit - RKRequestDelegate does not exist
  • Traverse Array and Display in markup
  • How to get icons for entities from eclipse?
  • Proper way to use connect-multiparty with express.js?
  • Load html files in TinyMce
  • JTable with a ScrollPane misbehaving
  • JaxB to read class hierarchy