Javascript 悬停county时在工具提示中显示CSV中的关联度量
我一直在使用Javascript 悬停county时在工具提示中显示CSV中的关联度量,javascript,json,d3.js,Javascript,Json,D3.js,我一直在使用d3.queue（）导入多个文件。JSON是映射，CSV是与JSON文件中的IDs关联的度量。我已成功加载CSV，并可以使用d3.map（）打印列表 在这里，我不确定当一个县处于悬停状态时，如何返回实际的\u边距。目标是每当悬停一个县时，在工具提示中显示实际的_边距。这是完整的代码，.html（）只是将hi打印为占位符 <!DOCTYPE html> <style> .counties { fill: white; s
d3.queue（）IDsd3.map（）实际的\u边距。目标是每当悬停一个县时，在工具提示中显示实际的_边距。这是完整的代码，.html（）
只是将hi
打印为占位符
<!DOCTYPE html>
<style>
.counties {
fill: white;
stroke: #7887AB;
stroke-width: .5px;
}
.counties .hovered,
.counties :hover {
fill: #061539;
stroke-width: .5px;
}
.county-borders {
fill: none;
stroke: #F0F8FF;
stroke-width: .2px;
stroke-linejoin: round;
stroke-linecap: round;
pointer-events: none;
}
.state-borders {
fill: none;
stroke: #162955;
opacity: .8;
stroke-linejoin: round;
stroke-linecap: round;
pointer-events: none;
}
.toolTip {
position: absolute;
display: none;
min-width: 80px;
height: auto;
background: none repeat scroll 0 0 #ffffff;
border: 1px solid #6F257F;
padding: 14px;
text-align: center;
}
</style>
<svg width="960" height="600"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/topojson.v2.min.js"></script>
<script>
var svg = d3.select("svg");
var path = d3.geoPath();
var tooltip = d3.select("body").append("div").attr("class", "toolTip");
var metrics = d3.map();
d3.queue()
.defer(d3.json, "https://d3js.org/us-10m.v1.json")
.defer(d3.csv, "https://raw.githubusercontent.com/MatthewSnellOKC/mapping/master/merge/countymetrics_json.csv", function(d) {metrics.set(d.county_fips, +d.actual_margin);})
.await(ready);
function ready(error, us) {
if (error) throw error;
svg.append("g")
.attr("class", "counties")
.selectAll("path")
.data(topojson.feature(us, us.objects.counties).features)
.enter()
.append("path")
.attr("d", path);
svg.append("g")
.attr("class", "state-borders")
.selectAll("path")
.data(topojson.feature(us, us.objects.nation).features)
.enter()
.append("path")
.attr("d", path);
svg.append("path")
.attr("class", "state-borders")
.attr("d", path(topojson.mesh(us, us.objects.nation, function(a, b) {
return a !== b;
})));
svg.append("path")
.attr("class", "state-borders")
.attr("d", path(topojson.mesh(us, us.objects.states, function(a, b) {
return a !== b;
})));
svg.append("path")
.attr("class", "county-borders")
.attr("d", path(topojson.mesh(us, us.objects.counties, function(a, b) {
return a !== b;
})));
svg.selectAll('.counties path')
.on('mouseover', function() {
tooltip
.style("left", 500 + "px")
.style("top", 70 + "px")
.style("display", "inline-block")
.html("hi"); //Goal is to return the associated actual_margin to the ID of each county.
})
.on('mouseout', function(d) {
tooltip.style("display", "none");
});
}
</script>
.县{
填充物：白色；
冲程：#7887AB；
笔划宽度：.5px；
}
.县.盘旋，
.悬停{
填充：#061539；
笔划宽度：.5px；
}
.县边界{
填充：无；
行程：#F0F8FF；
笔划宽度：.2px；
笔划线条连接：圆形；
笔划线头：圆形；
指针事件：无；
}
.国家边界{
填充：无；
冲程：#162955；
不透明度：.8；
笔划线条连接：圆形；
笔划线头：圆形；
指针事件：无；
}
.工具提示{
位置：绝对位置；
显示：无；
最小宽度：80px；
高度：自动；
背景：无重复滚动0 0#ffffff；
边框：1px实心#6F257F；
填充：14px；
文本对齐：居中；
}
var svg=d3.选择（“svg”）；
var path=d3.geoPath（）；
var tooltip=d3.select（“body”）.append（“div”）.attr（“class”，“tooltip”）；
var metrics=d3.map（）；
d3.队列（）
.defer（d3.json，“https://d3js.org/us-10m.v1.json")
.延迟（d3.csv，“https://raw.githubusercontent.com/MatthewSnellOKC/mapping/master/merge/countymetrics_json.csv，函数（d）{metrics.set（d.country_fips，+d.actual_margin）；}）
.等待（准备好）；
功能就绪（错误，美国）{
如果（错误）抛出错误；
svg.append（“g”）
.attr（“类”、“县”）
.selectAll（“路径”）
.data（topojson.feature（us，us.objects.countries）.features）
.输入（）
.append（“路径”）
.attr（“d”，路径）；
svg.append（“g”）
.attr（“类别”、“国家边界”）
.selectAll（“路径”）
.data（topojson.feature（us，us.objects.nation.features）
.输入（）
.append（“路径”）
.attr（“d”，路径）；
追加（“路径”）
.attr（“类别”、“国家边界”）
.attr（“d”，路径（topojson.mesh（us，us.objects.nation，函数a，b）{
返回a！==b；
})));
追加（“路径”）
.attr（“类别”、“国家边界”）
.attr（“d”，路径（topojson.mesh（us，us.objects.states），函数（a，b）{
返回a！==b；
})));
追加（“路径”）
.attr（“类”、“县边界”）
.attr（“d”，路径（topojson.mesh（us，us.objects.countries），函数（a，b）{
返回a！==b；
})));
svg.selectAll（“.path”）
.on（'mouseover'，function（）{
工具提示
.样式（“左”，500+“像素”）
.样式（“顶部”，70+“px”）
.style（“显示”、“内联块”）
.html（“hi”）；//目标是将关联的实际_边距返回到每个县的ID。
})
.on（'mouseout'，函数（d）{
样式（“显示”、“无”）；
});
}
因为您使用的是集合
metrics.set(d.county_fips, +d.actual_margin);
。。。您必须使用get
检索值：
.html("The value is " + metrics.get(d.id));
另外，请注意，您必须将数据d
传递给mouseover
事件：
.on('mouseover', function(d) {
//datum here -------------^
以下是您的代码和这些更改：
.县{
填充物：白色；
冲程：#7887AB；
笔划宽度：.5px；
}
.县边界{
填充：无；
行程：#F0F8FF；
笔划宽度：.2px；
笔划线条连接：圆形；
笔划线头：圆形；
指针事件：无；
}
.国家边界{
填充：无；
冲程：#162955；
不透明度：.8；
笔划线条连接：圆形；
笔划线头：圆形；
指针事件：无；
}
.工具提示{
位置：绝对位置；
最小宽度：80px；
高度：自动；
背景：无重复滚动0 0#ffffff；
边框：1px实心#6F257F；
填充：14px；
文本对齐：居中；
}
var svg=d3.选择（“svg”）；
var path=d3.geoPath（）；
var tooltip=d3.select（“body”）.append（“div”）.attr（“class”，“tooltip”）；
var metrics=d3.map（）；
d3.队列（）
.defer（d3.json，“https://d3js.org/us-10m.v1.json")
.延迟（d3.csv，“https://raw.githubusercontent.com/MatthewSnellOKC/mapping/master/merge/countymetrics_json.csv“，功能（d）{
指标集（d.县FIP，+d.实际利润率）；
})
.等待（准备好）；
功能就绪（错误，美国）{
如果（错误）抛出错误；
svg.append（“g”）
.attr（“类”、“县”）
.selectAll（“路径”）
.data（topojson.feature（us，us.objects.countries）.features）
.输入（）
.append（“路径”）
.attr（“d”，路径）；
svg.append（“g”）
.attr（“类别”、“国家边界”）
.selectAll（“路径”）
.data（topojson.feature（us，us.objects.nation.features）
.输入（）
.append（“路径”）
.attr（“d”，路径）；
追加（“路径”）
.attr（“类别”、“国家边界”）
.attr（“d”，路径（topojson.mesh（us，us.objects.nation，函数a，b）{
返回a！==b；
})));
追加（“路径”）
.attr（“类别”、“国家边界”）
.attr（“d”，路径（topojson.mesh（us，us.objects.states），函数（a，b）{
返回a！==b；
})));
追加（“路径”）
.attr（“类”、“县边界”）
.attr（“d”，路径（topojson.mesh（us，us.objects.countries），函数（a，b）{
返回a！==b；
})));
svg.selectAll（'path'）
.on（'mouseover'，函数（d）{
工具提示
.style（“左”，d3.event.pageX+20+“px”