无法在 d3 世界地图中为日本和朝鲜着色

Unable to color Japan and North Korea in a d3 world map

本文关键字:日本 d3 世界地图      更新时间:2023-09-26

>我使用 d3 制作了一张世界地图,我正在尝试通过在 css 中使用他们的 id 为某些国家着色。这适用于除日本和朝鲜以外的所有国家。这是一个小提琴。

d3.json("world.json",function(error,world){
    if (error) return console.error(error);
    console.log(world)
    var subunits = topojson.feature(world, world.objects.subunits);

    var projection = d3.geo.mercator()
    .translate([width / 2, height / 2])
    .scale((width - 1) / 2 / Math.PI);
    var path = d3.geo.path()
    .projection(projection); 

    svg.selectAll(".subunits")
        .data(topojson.feature(world, world.objects.subunits).features)
        .enter().append("path")
        .attr("class", function(d) { console.log(d.id) ;return "subunit " + d.id; })
        .attr("id", function(d){ 
            var str=String(d.properties.name);
            if(str.replace(/['s '.]/g, '').localeCompare("KoreanDMZ(north)")==0){
                console.log("it worked")
                return "Northkorea"
            }
            else
                return d.properties.name.replace(/['s '.]/g, '');})
        .attr("d", path); 
    svg.append("path")
        .datum(topojson.mesh(world, world.objects.subunits, function(a, b) { return a !== b && !(a.id==="RUA"&&b.id==="RUE") }))
        .attr("d", path)
        .attr("class", "subunit-boundary");

});

您的 CSS 代码使用国家/地区名称来标识日本 (#Japan(。JSON 数据使用国家/地区名称来标识一些小岛屿 (#Japan(,但使用岛屿名称来标识一些大岛屿(#Hokkaido、#Honshu、#Kyushu 等(。因此,大岛没有变色。

您的 CSS 代码缺少朝鲜和韩国的标识符。JSON 数据使用 #Korea 来识别韩国,#DemRepKorea 来识别朝鲜。因此,朝鲜和韩国没有被着色。