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

我试图使用

D3.js

如果散点图位于2013年和2014年之间，我想计算csv中的特定列，并显示这些节点的工具提示，我将如何基于计算显示工具提示？我怎样才能做到

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

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

svg.selectAll（“点”）
.数据（数据）
.enter（）.append（“圆”）
.attr（“r”，3.5）
.attr（“填充”、“蓝色”）
.attr（“cx”，函数（d）{返回x（d.created_at）；}）
.attr（“cy”，函数（d）{返回y（d.retweet_count）；}）
.on（“鼠标悬停”，函数（d）{
过渡部（）
.持续时间（200）
.样式（“不透明度”，.9）；
html（formatTime（d.created_at）+“
”+d.retweet_计数）
.style（“左”，“d3.event.pageX）+“px”）
.style（“top”，（d3.event.pageY-28）+“px”）；
})                  
.on（“mouseout”），函数（d）{
过渡部（）
.持续时间（500）
.样式（“不透明度”，0）；
});

以下是我在Plunker上的脚本链接：

---

我的解决方案分为两部分：首先，按年份计算总数，然后引用创建工具提示的函数中的总数。对于第一部分，我使用的是：

这将按年份计算

retweet\u count

和

favorite\u 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

元素，因为您的示例中缺少

工具提示

的定义。）这将获取当前元素的年份，索引到我们先前创建的数组中，并从中检索总数。剩下的只是把绳子放在一起

---

完整演示。

您的问题是如何显示工具提示，还是如何计算工具提示的内容？@Larskothoff我可以显示工具提示。我现在想做的是，如果散点图介于2013年和2014年之间，那么所有这些工具提示都应该显示X轴和Y轴的值，并且在这些值之间添加值（即收藏夹计数或转发计数）。我不确定我是否理解正确。给定一个特定的数据点，您希望显示什么作为工具提示？@larskothoff给定一个特定的数据点。我想显示X轴和Y轴的值，根据X轴上的年份，加上favorite_count和retweet_count列值的所有值，即如果点位于2013年和2014年之间，我想显示该年的favorite_count和retweet_count总数。Gud EXPLANCTION@Lars。非常感谢。我已经提供了鼠标事件后的工具提示代码。它们不工作。您正在将它们添加到

title

元素，该元素没有半径等：哦，好的！问这个问题真是愚蠢。非常感谢：）在代码中，实际上我正在做的是计算csv列中的

|

符号数

hashtags

，并将它们用作y轴值，并按相同的值显示图形。你能告诉我这件事哪里出了问题吗。

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