1

我正在使用 D3 Cloud 构建一个词云（https://github.com/jasondavies/d3-cloud），我想添加类似于http://www.jasondavies.com/wordcloud的悬停效果。

这是示例代码。完整代码位于http://plnkr.co/edit/gNtHZ0lMRTP98mptm3W8?p=preview

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

}
4

1 回答 1

2

在您链接到的页面上，他正在使用:hover 伪类。

<style>
  text:hover { opacity: .7 !important; }
</style>

在这里更新了代码。

于 2014-12-28T17:18:20.237 回答