D3.js SVG地图点击事件失效，如何点击国家将d变量数据打印到控制台？

现有代码问题 #

• 异步逻辑顺序错误：d3.json为异步请求，写在then回调外的路径生成、事件绑定代码执行时，地理数据尚未加载完成，data变量处于未定义状态，无法完成正常绑定。
• 事件回调参数适配错误：D3 v6及更高版本中，事件回调的第一个参数为事件对象，第二个参数才是绑定的地理要素数据，原写法中拿到的第一个参数是点击事件而非国家数据。
• DOM元素重复创建：then回调内部已经生成了一次国家路径元素，外部又重复执行路径创建逻辑，属于冗余代码，还会导致事件绑定的元素和实际渲染的元素不匹配。
• 事件绑定位置错误：原代码把打印逻辑写在了title元素的文本回调中，会在页面加载时直接触发而非点击时触发，点击事件需要绑定在path元素本身上。

修正后可运行代码 #

const svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height");

// 地图投影配置
const projection = d3.geoNaturalEarth1()
    .scale(width / 1.5 ) // 数值越小缩放倍数越大
    .translate([200, 700])  // 平移参数（水平，垂直）
const geoPathGenerator = d3.geoPath().projection(projection)

// 加载外部地理数据
d3.json("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/world.geojson").then(function(data) {
    // 绘制国家路径并绑定事件
    svg.append("g")
        .selectAll("path")
        .data(data.features)
        .join("path")
        .attr("fill", "#348C31") // 国家填充色
        .attr("d", geoPathGenerator)
        .style("stroke", "white")// 国界线颜色
        // 绑定点击事件，此时上下文为path元素
        .on('click', (event, d) => {
            console.log('对应国家完整数据：', d)
            console.log('国家ID：', d.id)
        })
        // 添加hover提示文本
        .append("title")
        .text(d => d.properties.name)
})

function buttonClick() {
    window.alert("Boom");
}

版本适配说明 #

如果你的项目使用的是D3 v5及更早版本，点击回调不需要传入event参数，直接写.on('click', d => console.log(d.id))即可生效。

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