d3.js svg not resizing

Question

I am trying to use my own data source with an existing bl.ocks demonstration of a word cloud. Here's what I've done , and as you can see, the text/block is quite small. I am trying to resize the svg and word cloud elements to take up the entire width of the screen, but so far I am not getting the desired response from adjusting the size of these elements:

 d3.layout.cloud().size([2000, 2000])
            .words(frequency_list)
            .rotate(0)
            .fontSize(function(d) { return 3*d.size; })
            .on("end", draw)
            .start();

    function draw(words) {
        d3.select("body").append("svg")
                .attr("width", 4000)
                .attr("height",2000)
                .attr("class", "graph-svg-component")
                .attr("class", "wordcloud")
                .append("g")
                // without the transform, words words would get cutoff to the left and top, they would
                // appear outside of the SVG area
                .attr("transform", "translate(320,200)")
                .selectAll("text")
                .data(words)
                .enter().append("text")
                .style("font-size", function(d) { return d.size + "px"; })
                .style("fill", function(d, i) { return color(i); })
                .attr("transform", function(d) {
                    return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";
                })
                .text(function(d) { return d.text; });
    }

How can I get the word cloud to expand the full width of my screen? Thanks for any suggestions.

Answer 1

svgWhen you create your svg, the width is assigned to the svg as attribute, not style.

So when you container is resized, the svg width attribute needs to be informed.

What you could do is to create something like this:

$(window).on('resize', resizeSvg);

    function resizeSvg() {
        svg.attr('width', $('#svg-container').width());
    }

This is part of the code in my project, you should mimic it.

Answer 2

You need to increase the position offset here:

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

to something like:

.attr("transform", "translate(500, 500)")

this is related to the size of the cloud.

However note that if you want to fit the cloud into the window, you'll have to take the window's dimensions into account and update the bounds on change as suggested by @Zhenyang Hua