D3.js地图点击国家跳转新标签页如何获取自定义数据集对应ID

核心思路 #

要实现GeoJSON地图数据和自定义业务表的关联，只需通过公共关联字段做一次映射绑定即可，具体逻辑如下：

• 以「国家名称」作为公共关联字段，提前将myTable转换为国家名到业务ID的映射字典，降低查找开销
• 在初始化地图要素时，将匹配到的业务ID直接挂载到对应GeoJSON的要素对象上，后续事件中可直接读取
• 调整点击跳转逻辑，使用挂载的业务ID拼接目标链接即可

具体代码修改 #

第一步：构建业务ID映射字典 #

在ready函数开头新增映射表构建逻辑：

// 构建国家名到业务ID的映射
const country2BizId = {}
myTable.forEach(item => {
  country2BizId[item.name] = item.id
})

第二步：给GeoJSON要素绑定业务ID #

在原有遍历data.features赋值人口的逻辑中，新增业务ID绑定：

data.features.forEach(function(d) {
  d.population = populationById[d.id]
  // 新增：绑定业务ID，无匹配时默认赋值为空字符串避免跳转报错
  d.bizId = country2BizId[d.properties.name] || ''
});

第三步：修改点击跳转逻辑 #

将原有点击事件中使用的d.id替换为我们绑定的d.bizId：

.on('click', function (d, i) {
  // 无匹配业务ID的国家可以选择不跳转，或跳转默认页
  if (!d.bizId) return
  var win = window.open('https://www.google.com/'+d.bizId , '_blank');
  win.focus();
})

完整修改后代码 #

JS 部分 #

var margin = {
        top: 0,
        right: 0,
        bottom: 0,
        left: 0
    },
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var color = d3.scaleThreshold()
    .domain([10000, 100000, 500000, 1000000, 5000000, 10000000, 50000000, 100000000, 500000000, 1500000000])
    .range(["rgb(247,251,255)", "rgb(222,235,247)", "rgb(198,219,239)", "rgb(158,202,225)", "rgb(107,174,214)", "rgb(66,146,198)", "rgb(33,113,181)", "rgb(8,81,156)", "rgb(8,48,107)", "rgb(3,19,43)"]);

var path = d3.geoPath();

var svg = d3.select("#map")
    .append("svg")
    .attr("width", width)
    .attr("height", height)
    .append('g')
    .attr('class', 'map');

var projection = d3.geoMercator()
    .scale(130)
    .translate([width / 2, height / 1.5]);

var path = d3.geoPath().projection(projection);


var myTable = [{
        "id": "1",
        "name": "China",
        "population": "1330141295"
    },
    {
        "id": "2",
        "name": "India",
        "population": "1173108018"
    },
    {
        "id": "4",
        "name": "United States",
        "population": "310232800"
    },
    {
        "id": "3",
        "name": "Indonesia",
        "population": "242968342"
    },
    {
        "id": "5",
        "name": "Russia",
        "population": "201103330"
    }
];


queue()
    .defer(d3.json, "https://gist.githubusercontent.com/micahstubbs/8e15870eb432a21f0bc4d3d527b2d14f/raw/a45e8709648cafbbf01c78c76dfa53e31087e713/world_countries.json")
    .defer(d3.tsv, "https://gist.githubusercontent.com/micahstubbs/8e15870eb432a21f0bc4d3d527b2d14f/raw/a45e8709648cafbbf01c78c76dfa53e31087e713/world_population.tsv")
    .await(ready);

function ready(error, data, population) {
    // 新增：构建国家名到业务ID的映射
    const country2BizId = {}
    myTable.forEach(item => {
        country2BizId[item.name] = item.id
    })

    var populationById = {};
    population.forEach(function(d) {
        populationById[d.id] = +d.population;
    });
    data.features.forEach(function(d) {
        d.population = populationById[d.id]
        // 新增：绑定业务ID
        d.bizId = country2BizId[d.properties.name] || ''
    });

    svg.append("g")
        .attr("class", "countries")
        .selectAll("#map")
        .data(data.features)
        .enter().append("path")
        .attr("d", path)
        .style("fill", function(d) {
            return color(populationById[d.id]);
        })
        .style('stroke', 'white')
        .style('stroke-width', 1.5)
        .style("opacity", 0.8)
        // 修改：点击事件使用业务ID跳转
        .on('click', function (d, i) {
            if (!d.bizId) return
            var win = window.open('https://www.google.com/'+d.bizId , '_blank');
            win.focus();
        })
        
    svg.append("path")
        .datum(topojson.mesh(data.features, function(a, b) {
            return a.id !== b.id;
        }))
        .attr("class", "names")
        .attr("d", path);
}

HTML 部分 #

<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/queue.v1.min.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.7.0/d3-tip.js"></script>

<div id="map"></div>

注意事项 #

如果出现国家名称匹配失败的情况，可对两个数据集的国家名做标准化预处理，比如统一转为小写、移除特殊字符、添加别名映射等，即可解决匹配问题。

内容的提问来源于stack exchange，提问作者user10981554