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 ?
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};
}
}