Question

我正在使用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; });

}

Answer 1

在您链接的页面上，他使用:hover pseudo-class。

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

更新了代码here。

在d3词云中添加悬停效果

1 个答案: