Why text goes out of the box while using D3 Word Cloud example by Jason Davies?

Question

I am using D3 Word Cloud for one of my project. In the example it is defined as width and height as 300 * 300. But when I run it sometimes only half of the text shows up in the box.

In this example, It is the word "Random" on the left. Only "om" has been displayed.

Can anyone help me how to display the output in a particular region?

Thanks

Answer 1

The coordinates of the words in the cloud are computed assuming that the center of the cloud is at (0,0). This is not the case with SVGs, so there's a g element below the top-level SVG that has the appropriate coordinate system translation applied. When changing the size of the word cloud, you need to change this as well.

In your case, the size of the word cloud is 800x300, so the translation should be (400,150):

.append("g").attr("transform", "translate(400,150)")

Answer 2

I think the translate should be half of your width and height. Eg if w=300 h=300 then translate should be translate(150,150). Hope it works.