Fit Text into SVG Element (Using D3/JS)

Question

I want to write text inside a rectangle I create as follows:

body = d3.select(\'body\')

svg = body.append(\'svg\').attr(\'height\', 600).attr(\'width\', 200         


        

Answer 1

To make it work with the animations just enclose in a group element and animate that one instead. http://jsfiddle.net/MJJEc/

body = d3.select('body')
svg = body.append('svg')
                    .attr('height', 600)
                    .attr('width', 200);
    var g = svg.append('g').attr("transform" ,"scale(0)");
    rect = g.append('rect')
                    .attr('width', 150)
                    .attr('height', 100)
                    .attr('x', 40)
                    .attr('y', 100)
                    .style('fill', 'none')
                    .attr('stroke', 'black')
    text = g.append('foreignObject')
                    .attr('x', 50)
                    .attr('y', 130)
                    .attr('width', 150)
                    .attr('height', 100)
                    .append("xhtml:body")
                    .html('
This is some information about whatever
')

    g.transition().duration(500).attr("transform" ,"scale(1)");