城市点出现在d3世界城市地图的世界地图后面
City dots are coming behind world map in World City Map in d3
我试图在d3中创建一个世界地图。地图应该显示与不同城市相关的数据。城市在地图上用红圈标出。
我能完成它的大部分。我面临的唯一挑战是城市点(红色圆圈)在地图后面。我可以在firefox的inspect元素中看到它们,但由于它们被打印在地图后面,所以不可见。
我在一个博客上读到这个问题,我应该在世界数据的加载方法中加载城市数据。我做了,但到目前为止没有任何帮助。这是我的代码-
var columns = [];
var measureArray = [];
columns.push("city");
measureArray.push("Room Revenue");
var maxMap = {};
var minMap = {};
for (var num = 0; num < measureArray.length; num++) {
var measureData = [];
for (var key in data) {
measureData.push(data[key][measureArray[num]]);
}
maxMap[measureArray[num]] = Math.max.apply(Math, measureData);
minMap[measureArray[num]] = Math.min.apply(Math, measureData);
}
parent.$("#maxMap").val(JSON.stringify(maxMap));
parent.$("#minMap").val(JSON.stringify(minMap));
var width = $(window).width()-170;
var height = $(window).height();
var projection = d3.geo.mercator();
// .center([-20, 60])
// .scale(150);
var path = d3.geo.path()
.projection(projection);
var svg = d3.select("#"+divID)
.append("svg")
.attr("width", width)
.attr("height", height);
var g = svg.append("g");
var colorMap = {};
var ctxPath=$("#ctxpath").val();
d3.json(ctxPath+"/JS/world-topo-min.json", function(error, world) {
var data = [
{
"city": "ZANZIBAR",
"Room Revenue": "1000",
"lat":"-6.13",
"lon":"39.31"
},
{
"city": "TOKYO",
"Room Revenue": "900",
"lat":"35.68",
"lon":"139.76"
},
{
"city": "AUCKLAND",
"Room Revenue": "1500",
"lat":"-36.85",
"lon":"174.78"
},
{
"city": "BANGKOK",
"Room Revenue": "2500",
"lat":"13.75",
"lon":"100.48"
},
{
"city": "DELHI",
"Room Revenue": "2500",
"lat":"29.01",
"lon":"77.38"
}
];
g.selectAll("circle")
.data(data)
.enter()
.append("a")
.attr("xlink:href", function(d) {
return "https://www.google.com/search?q="+d.city;
}
)
.append("circle")
.attr("cx", function(d) {
return projection([d.lon, d.lat])[0];
})
.attr("cy", function(d) {
return projection([d.lon, d.lat])[1];
})
.attr("r", 5)
.style("fill", "red");
g.selectAll("path")
.data(topojson.feature(world, world.objects.countries).features)
// .geometries)
.enter()
.append("path")
.attr("d", path)
.style("fill", function(d, i) {
return "white";
});
parent.$("#colorMap").val(JSON.stringify(colorMap));
})
var zoom = d3.behavior.zoom()
.on("zoom", function() {
g.attr("transform", "translate(" +
d3.event.translate.join(",") + ")scale(" + d3.event.scale + ")");
g.selectAll("path")
.attr("d", path.projection(projection));
});
svg.call(zoom);
d3.select(self.frameElement).style("height", height + "px");
任何帮助都是感激的,谢谢
似乎圆圈的dom元素在路径元素后面。您只需要更改附加元素到文档的顺序。先添加绘制地图的路径,再添加圆点。
g.selectAll("path") //Appending paths first
.data(topojson.feature(world, world.objects.countries).features)
.enter()
.append("path")
.attr("d", path)
.style("fill", function(d, i) {
return "white";
});
g.selectAll("circle") //Now appending circles
.data(data)
.enter()
.append("a")
.attr("xlink:href", function(d) {
return "https://www.google.com/search?q="+d.city;
}
)
.append("circle")
.attr("cx", function(d) {
return projection([d.lon, d.lat])[0];
})
.attr("cy", function(d) {
return projection([d.lon, d.lat])[1];
})
.attr("r", 5)
.style("fill", "red");
相关文章:
- 如何更改世界地图json文件的中心子午线
- 使用d3.js重复世界地图投影
- 显示没有重复的世界地图
- 在拉斐尔JS世界地图中添加国家点击操作
- 放大世界地图上的D3弹出窗口大小
- Raphael.js世界地图:如何使其可扩展
- SVG 世界地图坐标
- 阿根廷没有出现在世界地图上,d3.js
- HTML/CSS/JS 世界地图与简单的动画
- 无法在 d3 世界地图中为日本和朝鲜着色
- 在自定义的世界地图上创建我自己的地址、道路和方式
- 使用城市名称在地图上放置标记,而不是在javascript映射库中使用latin和Long
- JavaScript SVG世界地图库离线工作
- 世界地图平面墨卡托.svg与国家名称
- Highcharts世界地图未渲染
- 城市点出现在d3世界城市地图的世界地图后面
- 绘制在世界地图上的条形图
- 支持经纬度的世界地图
- 如何使用jVectorMap插件在世界地图上突出显示某个城市
- 为什么这9个美国城市在D3地图上没有对应它们的实际位置,而我用Albers美国投影来绘制它们