Question

我正在尝试使用D3.js向图表中显示的节点显示工具提示以及如何根据计算显示工具提示，如果散点图位于2013年和2014年之间我想计算csv中的特定列和这些节点的disply工具提示？我怎么能这样做？

以下是我用来显示工具提示的代码：

svg.selectAll("dot")
    .data(data)
.enter().append("circle")
    .attr("r", 3.5)
    .attr("fill","blue")
    .attr("cx", function(d) { return x(d.created_at); })
    .attr("cy", function(d) { return y(d.retweet_count); })
    .on("mouseover", function(d) {      
        div.transition()        
            .duration(200)      
            .style("opacity", .9);      
        div .html(formatTime(d.created_at) + "<br/>"  + d.retweet_count)  
            .style("left", (d3.event.pageX) + "px")     
            .style("top", (d3.event.pageY - 28) + "px");    
        })                  
    .on("mouseout", function(d) {       
        div.transition()        
            .duration(500)      
            .style("opacity", 0);   
    });

以下是我在Plunker上的脚本的链接： Display tooltip in Scatterplot

Answer 1

我的解决方案分为两部分：首先，按年计算总计，然后在创建工具提示的函数中引用这些部分。对于第一部分，我使用的是d3.nest() operator：

var byYear = d3.nest()
  .key(function(d) { return d.created_at.getFullYear(); })
  .rollup(function(d) {
    return d.reduce(function(prev, cur) {
      prev.retweet_count += cur.retweet_count;
      prev.favorite_count += cur.favorite_count;
      return prev;
    }, {retweet_count: 0, favorite_count: 0});
})
.map(data);

这将按年计算retweet_count和favorite_count的总和，创建一个可以使用年份索引的关联数组。然后使用它来创建工具提示：

.append("title")
    .text(function(d) {
      var year = d.created_at.getFullYear();
      var totals = byYear[year];
      return d["favorite_count"] + " (" + xValue(d) + ", " + yValue(d) + ")" +
        " retweets: " + totals.retweet_count + ", favorites: " + totals.favorite_count;
  });

（我已将其更改为title元素，因为您的示例中缺少tooltip的定义。）这将获取当前元素的年份，索引到我们的数组中先前创建并从中检索总计。其余的只是将字符串放在一起。

完整演示here。

在d3.js中的节点上显示工具提示

1 个答案: