Question

I'm trying to use the World Cloud Generator : http://www.jasondavies.com/wordcloud/about/ wich is a addon to use with D3.JS.

Here's my code :

var fill = d3.scale.category20();

function draw(words) {
    d3.select("body").select("#corps div")

    .append("svg")
    .attr("width", 900)
    .attr("height", 900)

    .append("g")
    .attr("transform", "translate(450,450)")

    .selectAll("text")
    .data(words)
    .enter().append("text")
        .attr("text-anchor", "middle")
        .attr("transform", function(d) {
            return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";
        })
        .style("font-size", function(d) { return d.size + "px"; })
        .style("font-family", "Impact")
        .style("fill", function(d, i) { return fill(i); })


    .text(function(d) { return d.text; });
}

function rotation(){
    return ~~(90 * Math.random() *2);
}

var taille = 90;
function motTaille(mot){
    taille = taille -2;
    return {text: mot, size: taille};
}

var mots = tabMots.map(motTaille);

var layout = d3.layout.cloud()
    .timeInterval(10)
    .size([900, 900])
    .words(words_tab)
    .padding(1)
    .rotate(function() { return ~~(Math.random() * 2) * 90; })
    .font("Impact")
    .fontSize(function(d) { return d.size; })
    .on("end", draw)
    .start();

I already have an array of words : words_tab.

My problem is : In the website, Jason Davies (author) codes a detection of collision. But when I have a lot of words in my array, they overlap each other...

Am i missing something ?

Was it helpful?

Solution

I found the problem... enough simple !

taille = taille -2;

Sizes can't be negatives, so I corrected the problem :

var taille = 90;
var tailleMini = 15;
function motTaille(mot){
    if(taille < tailleMini)
        return {text: mot, size: tailleMini};
    else{
        taille = taille -2;
        return {text: mot, size: taille};
    }
}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top