通過緯度經度查找topojson特征

Question

我正在進行的演示基於World tour ，它使用canvas而不是SVG，因此我無法將鼠標事件附加到country路徑以查找單擊的國家/地區。 有沒有辦法找到哪個特征包含從鼠標坐標得到的緯度/經度？

var canvas = d3.select("canvas")
    .on("mousemove", function() {
        var p = d3.mouse(canvas.node());
        console.log(projection.invert(p)); // which country contains these coordinates?
    });

var countries;
queue()
    .defer(d3.json, 'world-110m.json.txt')
    .defer(d3.tsv, 'world-country-names.tsv')
    .await(function ready(error, world, names) {
        countries = topojson.feature(world, world.objects.countries).features;
    });

Answer 1

您最好的選擇是創建一個隱藏的畫布，用於鏡像可見的畫布，但以不同的RGB顏色（文字“位圖”）繪制每個國家/地區，並通過鼠標光標位置的像素顏色查找相應的要素。

你可以在這里看到一個有效的例子。 我保持位圖可見，這樣你就可以看到發生了什么。

你還有其他選擇：

1. 使用庫（例如Turf.js ）進行多邊形點檢查，例如使用turf.inside 。
2. 作為優化，構造每個要素中所有點的d3.geom.quadtree ，並僅對四叉樹葉節點內的要素執行多邊形點檢查。