How do I wrap SVG Text in a rectangle.

[Dylan]

Hello there,

I'm trying to wrap the SVG Text in a rectangle.I tried the
node.append("rect") it dosen't seem to make the rectangle shape
dynamic, according to the text. Some text might be longer or shorter.

Do I need to write a custom function (d,i) which automatically re
sizes the rectangle according to the size of the text. I'm attaching
an example below.

http://cl.ly/image/031k192Y1j1C

Cheers,
Dylan

[Makoto Inoue]

Hi, Dylan.

Can you use the html wrapping technique like in this blog?

http://vallandingham.me/building_a_bubble_cloud.html

Cheers.

Makoto

[Chris Viau]

It seems you don't want to wrap the text in the rectangle but resize the rectangle to fit the text. The SVG rectangle is not a container like a div is, and will not expand to fit its content. You will have to compute the text size and resize the rectangle accordingly like this: http://tributary.io/inlet/4572769

[Chris Viau]

It's a bit hard to help you if you don't share the broken code. Try modifying mine until you reproduce your issue. In the Tributary UI, you can click on "fork", modify the code and then "save" and copy paste the new url. Do you have an error in the console? Did you forget to grab the selection node with .node() before using getBBox()?

On Sat, Jan 19, 2013 at 7:54 AM, Dylan <tmli...@gmail.com> wrote:

Chris, when I try to get the text's size the actual <text></text> disappears.

[Dylan]

Hey Chris,

I got it to work. I was getting the size of the text before rendering it..silly me. The example you showed refers to node(0); meaning data 1. I have lots of data in my JSON, how do I refer to that? Do I need to write a function(d,i) ? 

[Chris Viau]

In fact, the .node(0) was a typo, and I corrected it to .node() (I mixed it up with the jQuery equivalent .get(0)). 

On Sat, Jan 19, 2013 at 8:52 PM, Dylan <tmli...@gmail.com> wrote:

I somewhat got it. I'm using .each(); jQuery function to iterate
through ".node" DOM element. Now I need to assign getSize variable to
width and height.

$(".node").each(function(index) {

        var getText = $(this).text();
        var getSize = getText.getComputedTextLength;
        alert(getSize);

    });

[Dylan]

I've tried that. It's computing same width and height for each data.

[Dylan]

I did this so far to iterate over each element 'node' in the DOM which
is giving me the proper results.

Now I want to assign the textSize according to the rectangle's width
and height for each node. Which is confusing because textSize is a
private variable....What do you think of this method?

$('.node').each(function () {

var text = $(this).text();
var textSize = text.length;
alert(textSize);

});

[Shreeram Kushwaha]

Is that possible to fit the text inside a rectangle according to the dimensions of the rectangle? So, that text font size inside different rectangles will be different.

--

(*Shreeram Kushwaha* )
Final Year, Undergraduate
Computer Science and Engineering
NIT Rourkela,
Orissa,India

[Chris Viau]

This doesn't look like a D3 question anymore. You are selecting any element with a class of "node" with jQuery, but it can be anything. Using D3, I would iterate through each group to easily find the child text and rectangle for each. Why don't you start by modifying my code example?

[Dylan]

Hey Chris,

I GOT IT!

I don't know if it's an efficient method ... please do evaluate and
tell me...some rectangles are sort of off in the width and height
area...You think I will be better of placing divs?

var getSize;
var el = document.getElementsByTagName('text');

for(i=0; i<el.length; i++) {

getSize = el[i].getBBox();
console.log(getSize);
}

rect.attr("width", getSize.width)
.attr("height", getSize.height)
.attr("x", getSize.x)
.attr("y", getSize.y);