Javascript 来自两个不同数据源（d3.js）的d.properties的内部html

我有两张并列的d3 choropleth地图，都是从同一个geojson绘制的，但代表不同年份、当前和2014年的不同数据

我从两个不同年份加载数据：

var currentMap = d3.map();
var map2014 = d3.map();

d3.queue()

.defer(d3.csv, "data/overdoses_2018_updated.csv", function(d) { 
    if (isNaN(d.DrugOverdoseMortalityRate)) {
        console.log('nan')
    } else {
        currentMap.set(d.FIPS, +d.DrugOverdoseMortalityRate); 
    }

})
.defer(d3.csv, "data/overdoses_2014_updated.csv", function(e) { 
    if (isNaN(e.DrugOverdoseMortalityRate)) {
        console.log('nan')
    } else {
        map2014.set(e.FIPS, +e.DrugOverdoseMortalityRate); 
    }

})
  .await(ready);

并成功渲染本年度的地图-

    //GeoPath
  var geoPath = d3.geoPath()
    .projection( albersProjection );



    d3.select("svg.current").selectAll("path")
    .data( CaliforniaCountiesOverdoses.features )
    .enter()
    .append( "path" )
    .attr( "d", geoPath )
        .attr("class","counties")
        .attr("fill", function(d) { 
            var value = currentMap.get(d.properties.ID);
            return (value != 0 ? current_color(value) : "grey");  
})
    // setting popup based on current data
    .on("mouseover", function(d) {         
            countyDiv .html('<br/>' + d.properties.NAME + '<br/>' + d.properties.DrugOverdo + ' overdoses per 10,000')  
            })

//地理路径
var geoPath=d3.geoPath（）
.投影（阿尔伯斯投影）；
d3.选择（“svg.current”）.选择全部（“path”）
.数据（加利福尼亚州过量.特征）
.输入（）
.append（“路径”）
.attr（“d”，地理路径）
.attr（“类”、“县”）
.attr（“填充”，函数（d）{
var值=currentMap.get（d.properties.ID）；
返回值（值！=0？当前颜色（值）：“灰色”）；
})
//基于当前数据设置弹出窗口
.on（“鼠标悬停”，函数（d）{
countyDiv.html（“
”+d.properties.NAME+”
“+d.properties.DrugOverdo+“每10000次过量”）
})

现在，我在2014年也做了同样的事情：

 d3.select("svg.map2014").selectAll("path")
    .data( CaliforniaCountiesOverdoses.features )
    .enter()
    .append( "path" )
    .attr( "d", geoPath )
        .attr("class","counties-2014")

        .attr("fill", function(e) { 
            var value2014 = map2014.get(e.properties.ID);
            return (value2014 != 0 ? current_color(value2014) : "grey");  
})
     // trying to set popup based on 2014 data
    .on("mouseover", function(e) {        
            county2014Div .html('<br/>' + e.properties.NAME + '<br/>' + e.properties.DrugOverdo + ' overdoses per 10,000')  

d3.select（“svg.map2014”）.selectAll（“路径”）
.数据（加利福尼亚州过量.特征）
.输入（）
.append（“路径”）
.attr（“d”，地理路径）
.attr（“类别”，“县-2014”）
.attr（“填充”，函数（e）{
var value2014=map2014.get（e.properties.ID）；
返回值（value2014！=0？当前颜色（value2014）：“灰色”）；
})
//尝试根据2014年数据设置弹出窗口
.on（“鼠标悬停”，函数（e）{
county2014.html（“
”+e.properties.NAME+”
“+e.properties.DrugOverdo+“每10000次过量”）

---

一切都很完美-县填充颜色反映了2014年的数据，但输入County2014的html不是2014年的数据，它仍然是当前的数据。我如何从2014年的数据源而不是当前的数据源读取d.properties？提前感谢。

您使用的是

Ca中的数据Liforniaccountries过量。功能

就像在

fill（）

中一样，根据

路径的ID查找值

d3.select("svg.map2014").selectAll("path")
    .data( CaliforniaCountiesOverdoses.features )
    .enter()
    .append( "path" )
    .attr( "d", geoPath )
    .attr("class","counties-2014")
    .attr("fill", function(e) { 
        var value2014 = map2014.get(e.properties.ID);
        return (value2014 != 0 ? current_color(value2014) : "grey");  
    })
    .on("mouseover", function(e) {        
        var value2014 = map2014.get(e.properties.ID);
        county2014Div .html('<br/>' + e.properties.NAME + '<br/>' + value2014 + ' overdoses per 10,000');

d3.select（“svg.map2014”）.selectAll（“路径”）
.数据（加利福尼亚州过量.特征）
.输入（）
.append（“路径”）
.attr（“d”，地理路径）
.attr（“类别”，“县-2014”）
.attr（“填充”，函数（e）{
var value2014=map2014.get（e.properties.ID）；
返回值（value2014！=0？当前颜色（value2014）：“灰色”）；
})
.on（“鼠标悬停”，函数（e）{
var value2014=map2014.get（e.properties.ID）；
county2014.html（“
”+e.properties.NAME+“
”+value2014+“每10000次过量”）；

通过删除所有重复的代码，您的代码可以大大简化。
您使用的是加利福尼亚州Overdoses.features中的数据

就像在
fill（）
中一样，根据
路径的ID查找值

d3.select("svg.map2014").selectAll("path")
    .data( CaliforniaCountiesOverdoses.features )
    .enter()
    .append( "path" )
    .attr( "d", geoPath )
    .attr("class","counties-2014")
    .attr("fill", function(e) { 
        var value2014 = map2014.get(e.properties.ID);
        return (value2014 != 0 ? current_color(value2014) : "grey");  
    })
    .on("mouseover", function(e) {        
        var value2014 = map2014.get(e.properties.ID);
        county2014Div .html('<br/>' + e.properties.NAME + '<br/>' + value2014 + ' overdoses per 10,000');

d3.select（“svg.map2014”）.selectAll（“路径”）
.数据（加利福尼亚州过量.特征）
.输入（）
.append（“路径”）
.attr（“d”，地理路径）
.attr（“类别”，“县-2014”）
.attr（“填充”，函数（e）{
var value2014=map2014.get（e.properties.ID）；
返回值（value2014！=0？当前颜色（value2014）：“灰色”）；
})
.on（“鼠标悬停”，函数（e）{
var value2014=map2014.get（e.properties.ID）；
county2014.html（“
”+e.properties.NAME+“
”+value2014+“每10000次过量”）；

通过删除所有重复的代码，您的代码可以简化很多。
谢谢！这非常有效，但我正在试图找出原因。为什么需要在mouseover函数中再次声明value2014变量？map2014.get（e.properties.ID）到底是什么指向？再次感谢！javascript具有函数作用域。您需要使用路径ID并查找2014 json数据中的数据，map2014是在加载阶段使用此ID=>properties MappingThank构建的！这非常有效，但我正在试图找出原因。为什么您需要在e mouseover函数？map2014.get（e.properties.ID）到底指向什么？再次感谢！javascript具有函数作用域。您需要使用路径的ID并查找2014 json数据中的数据，map2014是在加载阶段使用此ID=>properties映射生成的