Collision

[injoum]

I am still having issues on how to make the wordcloud work without collisions, does that work?

[injoum]

var fill = d3.scale.category20();

var layout = d3.layout.cloud().size([1000, 1000])
        .words(frequency_list)
        .padding(true)
        .rotate(0)
        .text(function(d){debugger; return d.text})
        .font("sans-serif")
        .fontSize(function(d) { return d.size; })
        .on("end", draw);
        layout.start();

function draw(words) { d3.select("body").append("svg") .attr("width",layout.size()[0]) .attr("height", layout.size()[1]) .attr("class", "legend") .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(" + layout.size()[0] / 2 + "," + layout.size()[1] / 2 + ")") .selectAll("text") .data(words) .enter().append("text") .style("font-size", function (d) { return d.size + "px"; }) .style("fill", function (d, i) { return fill(i); }) .attr("transform", function(d) { return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")"; }) .text(function(d) { return d.text; }); }

[jasondavies]

You are missing .attr("text-anchor", "middle").

[injoum]

Thank you this helped me get around the edges the words were being cut off but still some words are not readable due to collision:

[jasondavies]

Please post a reproducible example. I also noticed that you needed to add .attr("font-family", …) to ensure the same font is used by the layout algorithm and your "draw" function.

[jasondavies]

(You can use https://jsfiddle.net or https://bl.ocks.org.)

[injoum]

https://jsfiddle.net/84gonu1o/#&togetherjs=caqHNTPIII

[jasondavies]

You didn't add .attr("text-anchor", "middle") to the correct place; it needs to be added to each <text> element. See the bundled example here.

[injoum]

same output

[injoum]

https://jsfiddle.net/au4nhL96/

[jasondavies]

Can you post an example that actually runs (full code, HTML etc.)? If you ask for help, make it as easy as possible for someone to help you, otherwise they end up spending most of their time trying to reproduce it…

[injoum]

oh am really sorry I didn't mean to, it is just I am not working with a normal html page I am creating it in an Oracle APEX plugin so am recreating it in an html page now at the moment so we can see what is wrong

[jasondavies]

Sorry, but I've already asked you twice to post a working example that demonstrates the problem, and pasting incomplete code into the issue is clearly ignoring my request.

I normally have a rule that GitHub issues are for bug reports and feature requests only; not for asking for help.

I've already pointed out the main two issues that seem to trip people up: (a) text-anchor="middle" and (b) ensuring the same font is used for the layout and the output.

I'm afraid I don't have any more time or patience to continue with this GitHub issue, so please consider asking for help in another forum such as StackOverflow.