d3.js - 在 d3 js 中，如何将附加文本作为工具提示附加到圆圈上

Question

我正在研究 d3 示例http://bost.ocks.org/mike/nations/：

我正在尝试为带有名称和签入详细信息的圈子添加标题。

以下是显示年份功能的修改代码（其余代码几乎没有变化，，，）：

 // Updates the display to show the specified year.
  function displayYear(year) {
    dot.data(interpolateData(year), key)
    .call(position)
    .sort(order);

    dot.append("title").text(function(d) { return d.name});

    dot.text(function(d) { return d.name + "~"+ d.checkins + d.Checkintimes; });

    label.text(Math.round(year));

      }
// Interpolates the dataset for the given (fractional) year.
  function interpolateData(year) {
    return nations.map(function(d) {
      return {
        name: d.name,
        region: d.region,
        checkins: interpolateValues(d.checkins, year),
        teamsize: interpolateValues(d.teamsize, year),
        Checkintimes: interpolateValues(d.Checkintimes, year)
      };

    });
  }

但是，相同的内容并未在圈子中显示为标题。我只想在圆圈中附加签到细节。

我的 json 文件包含以下内容：

[ {

"name":"Search&Navigator",
"region":"IPScience",
"checkins":[[2000,100],[2001,200],[2002,300],[2003,275],[2004,222],[2005,280],[2006,281],[2007,400],[2008,55],[2009,300]],
"teamsize":[[2000,10],[2001,7],[2002,7],[2003,12],[2004,5],[2005,3],[2006,10],[2007,12],[2008,12],[2009,10]],
"Checkintimes":[[2000,40],[2001,50],[2002,60],[2003,50],[2004,40],[2005,30],[2006,30],[2007,35],[2008,30],[2009,30]]

}]

Answer 1

您的变量dot不包含对该title元素的引用。只需更改附加它的函数即可执行您想要的操作：

dot.append("title")
   .text(function(d) { return d.name + "~"+ d.checkins + d.Checkintimes; });