title: Adding hover effect in d3 word cloud
body: <p>I am using D3 Cloud to build a word cloud (<a href="https://github.com/jasondavies/d3-cloud" rel="nofollow">https://github.com/jasondavies/d3-cloud</a>) and I would like to add an hover effect similar to <a href="http://www.jasondavies.com/wordcloud" rel="nofollow">http://www.jasondavies.com/wordcloud</a>.</p>
  
  <p>Here is the sample code. Complete code is at <a href="http://plnkr.co/edit/gNtHZ0lMRTP98mptm3W8?p=preview" rel="nofollow">http://plnkr.co/edit/gNtHZ0lMRTP98mptm3W8?p=preview</a></p>
  
  <pre><code>     var sizeScale = d3.scale.linear()
           .domain([0, d3.max(frequency_list, function(d) { return d.freq} )]).range([10, 95]);
  
  
      layout = d3.layout.cloud().size([w, h])
      .words(frequency_list)
      .padding(5)
      .rotate(function() { return ~~(Math.random() * 2) * 90; })
      .font("Impact")
      .fontSize(function(d) { return sizeScale(d.freq); })
        .on("end",draw)
        .start();
  }
  function draw(words) {
  
  
  var fill = d3.scale.category20();
  
      d3.select(container).remove();
  
      d3.select("body").append(container)
      .attr("width", w)
      .attr("height", h) 
          .append("g")
      .attr("transform", "translate(" + [w/2, h/2] + ")")
      .selectAll("text")
      .data(words)
      .enter().append("text")
  
      .transition()
      .duration(function(d) { return d.time}  )
      .attr('opacity', 1)
      .style("font-size", function(d) { return d.size + "px"; })
      .style("font-family", "Impact")
        .style("fill", function(d, i) { return fill(i); })
      .attr("text-anchor", "middle")
      .attr("transform", function(d) {
        return "rotate(" + d.rotate + ")";
      })
      .attr("transform", function(d) {
        return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";
      })
      .text(function(d) { return d.text; });
  
  }
  </code></pre>