title: Collision with Word Cloud Generator (D3.JS)
body: <p>I'm trying to use the World Cloud Generator : <a href="http://www.jasondavies.com/wordcloud/about/" rel="nofollow">http://www.jasondavies.com/wordcloud/about/</a>
  wich is a addon to use with D3.JS.</p>
  
  <p>Here's my code : </p>
  
  <pre><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();
  </code></pre>
  
  <p>I already have an array of words : <code>words_tab</code>.</p>
  
  <p>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...</p>
  
  <p>Am i missing something ?</p>