无法在 d3 世界地图中为日本和朝鲜着色
Unable to color Japan and North Korea in a d3 world map
>我使用 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 来识别朝鲜。因此,朝鲜和韩国没有被着色。
相关文章:
- D3在一个调用中绘制不同的SVG形状,没有可见性
- 为什么在单独的函数中应用时转换会闪烁/断断续续(D3)
- 如何在d3.js中返回路径的y坐标
- d3基于用户选择动态更新节点
- 有条件更新d3.js力图中节点的最佳方法
- 为什么我的d3.jsselectAll+过滤器没有过滤
- 使用D3.js计算带有字母间距的文本长度
- d3中堆栈函数和嵌套函数之间的差异
- D3.js模式不适用于弧形或圆环图
- d3.js Chord图的动态工具提示
- 在D3.js中,有没有任何方法可以将x和y方向上的滚动事件绑定到平移svg
- D3嵌套组作为x轴
- d3.hexbin插件-动态定义颜色域以适应数据
- HTML5FileReader输出到D3.js图表
- 如何在d3上的图形中添加放大和缩小按钮
- 在对象数组中查找多个值的d3范围
- d3中的条件转换
- D3.js生成有效的SVG,但不显示任何内容
- d3.js:限制画笔的大小
- 无法在 d3 世界地图中为日本和朝鲜着色