Javascript 基于不同的数据列更新悬停工具提示

我下面有一段代码，目的是在每个圆上都包含一个悬停工具提示。这个问题是，当我附加圆时，我返回的是lat/long数据列。工具提示似乎只适用于当前正在加载的数据列

我想在工具提示中显示其他数据列（城市、州等），但是我不确定如何在代码中调用这些数据列

总之，我想将d.state（我的数据集中的一个单独的列）调用到

“div.html（d.lng+”
“+d.lat）”
d3.tsv（“数据/读取_666.txt”）
.世界其他地区（功能（d）{
返回{
permalink:d.permalink，
横向：纵向浮动（d.lat），
液化天然气：浮球（d.long），
城市：d.city，
州：d州，
创建时间：时刻（d.创建时间：“YYYY-MM-DD HH:MM:ss”）
};
})
.get（函数（错误，行）{
if（err）返回控制台。error（err）；
window.site_data=行；
});
});
//使用“永久链接”显示站点
var displaySites=功能（数据）{
var sites=svg.selectAll（“.site”）
.数据（数据、功能（d）{
返回d.permalink；
});
sites.enter（）.append（“圆圈”）
.attr（“类”、“站点”）
.attr（“cx”，功能（d）{
回报预测（[d.lng，d.lat]）[0]；
})
.attr（“cy”，函数（d）{
回报预测（[d.lng，d.lat]）[1]；
})
.on（“鼠标悬停”，功能（d）{
过渡部（）
.持续时间（200）
.样式（“不透明度”，.9）；
div.html（“状态”+d.State）
.style（“左”，“d3.event.pageX）+“px”）
.style（“top”，（d3.event.pageY-28）+“px”）；
})
.开启（“鼠标出”，功能（d）{
过渡部（）
.持续时间（500）
.样式（“不透明度”，0）；
})
.attr（“r”，1）
.transition（）.持续时间（400）
.attr（“r”，7）；
网站退出（）
.transition（）.持续时间（300）
.attr（“r”，0）
.remove（）；
};

解决方案：

---

必须使用正确的变量更新d3.tsv（），因此需要添加“state:d.state”以使其正常工作。然后，我可以在工具提示代码中调用它，例如，

data

中有什么内容？它是一个简单的.txt文件（从.tsv转换而来），包含“permalink”、“city”、“state”、“lat”、“long”列。我添加了一些代码，解释了如何加载数据集。刚开始工作，就在主帖子中添加了解决方案。谢谢请不要将解决方案编辑到原始帖子中。考虑写一个或删除问题AltoCube。

"div.html(d.lng + "<br>" + d.lat)"




  d3.tsv("data/read_666.txt")
    .row(function(d) {
      return {
        permalink: d.permalink,
        lat: parseFloat(d.lat),
        lng: parseFloat(d.long),
        city: d.city,
        state: d.state,
        created_at: moment(d.created_at,"YYYY-MM-DD HH:mm:ss")
            };
    })
    .get(function(err, rows) {
        if (err) return console.error(err);

      window.site_data = rows;
    });
});



//display the sites using "permalink"
var displaySites = function(data) {
  var sites = svg.selectAll(".site")
  .data(data, function(d) {
    return d.permalink;
  });

sites.enter().append("circle")
  .attr("class", "site")
  .attr("cx", function(d) {
    return projection([d.lng, d.lat])[0];
        })
  .attr("cy", function(d) {
    return projection([d.lng, d.lat])[1];
        })
            .on("mouseover", function(d) {
                 div.transition()
                         .duration(200)
                         .style("opacity", .9);
                 div.html("State" + d.state)
                         .style("left", (d3.event.pageX) + "px")
                         .style("top", (d3.event.pageY - 28) + "px");
                 })
         .on("mouseout", function(d) {
                 div.transition()
                         .duration(500)
                         .style("opacity", 0);
         })
        .attr("r", 1)
        .transition().duration(400)
            .attr("r", 7);


sites.exit()
.transition().duration(300)
  .attr("r",0)
  .remove();
 };