d3映射国家代码边界

时间:2014-01-07 11:47:13

标签: d3.js topojson

我基本上跟随Let's Make a Map教程http://bost.ocks.org/mike/map/并附上世界地图。我想在教程中区分海岸线和地面边界,并将国家代码添加为每个边界的类 - 这样当一个国家突出显示时,填充和描边颜色都会改变。因为这是一张世界地图,有太多国家/地区可以手动执行此操作,但我无法弄清楚如何动态执行此操作。

我的代码的相关部分是:

var countryPaths = svg.append("g")
.attr("class", "countryPaths");

var countries = topojson.feature(world, world.objects.countries);

// add individual country paths
countryPaths.selectAll(".countries")
.data(countries.features)
.enter()
.append("path")
.attr("class", function(d) {return "country " + d.properties.adm0_a3; } )
.attr("d", path)

// add coastline
countryPaths.append("path")
.datum(topojson.mesh(world, world.objects.countries, function(a, b) { return a == b }))
.attr("d", path)
.attr("class","coastLine");

// add terrestrial borders
countryPaths.append("path")
.datum(topojson.mesh(world, world.objects.countries, function(a, b) { return (a !== b)}))
.attr("d", path)
.attr("class", "country-boundary");
});

然而,当我这样做时,海岸线(和地面边界)被创建为单一路径,因此不可能将日本的海岸线改变为不同的颜色。我有什么想法可以达到这个目的吗?

0 个答案:

没有答案