与词云生成器的碰撞(D3.JS)

时间:2013-07-09 15:17:37

标签: javascript d3.js collision-detection word-cloud

我正在尝试使用World Cloud Generator:http://www.jasondavies.com/wordcloud/about/ 这是与D3.JS一起使用的插件。

这是我的代码:

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();

我已经有一系列单词:words_tab

我的问题是:在网站上,杰森戴维斯(作者)对碰撞的检测进行了编码。但是当我在阵列中有很多单词时,它们会相互重叠......

我错过了什么吗?

1 个答案:

答案 0 :(得分:0)

我发现问题......够简单了!

taille = taille -2;

尺寸不能为负数,所以我更正了问题:

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