d3 js標記不顯示在地圖上

我有一個d3.js的問題。標記顯示在地圖下方而不是其上。下面的代碼：d3 js標記不顯示在地圖上

<!DOCTYPE html> 
<meta charset="utf-8"> 
<script src="http://d3js.org/d3.v3.min.js"></script> 
<script src="//d3js.org/d3.geo.projection.v0.min.js"></script> 
<script src="//d3js.org/topojson.v1.min.js"></script> 
<script src="http://d3js.org/colorbrewer.v1.min.js"></script> 

<script src="http://bl.ocks.org/emeeks/raw/f3105fda25ff785dc5ed/tile.js" type="text/javascript"> 
</script> 
<script src="http://bl.ocks.org/emeeks/raw/f3105fda25ff785dc5ed/d3.quadtiles.js" type="text/javascript"> 
</script> 
<script src="http://bl.ocks.org/emeeks/raw/f3105fda25ff785dc5ed/d3.geo.raster.js" type="text/javascript"> 
</script> 
<script src="https://rawgit.com/emeeks/d3-carto-map/master/d3.carto.map.js" type="text/javascript"> 
</script> 
<style> 
.markerButton { 
    position: fixed; 
    top: 20px; 
    cursor: pointer; 
    z-index: 99; 
    } 

body { 
    background: #fcfcfa; 
} 

.stroke { 
    fill: none; 
    stroke: #000; 
    stroke-width: 3px; 
} 

.fill { 
    fill: #fff; 
} 

.graticule { 
    fill: none; 
    stroke: #777; 
    stroke-width: .5px; 
    stroke-opacity: .5; 
} 

.land { 
    fill: #222; 
} 

.boundary { 
    fill: none; 
    stroke: #fff; 
    stroke-width: .5px; 
} 

</style> 
<body onload="makeSomeMaps()"> 




<script> 

var width = 960, 
    height = 500; 

var projection = d3.geo.mollweide() 
    .scale(165) 
    .translate([width/2, height/2]) 
    .precision(.1); 

var path = d3.geo.path() 
    .projection(projection); 

var graticule = d3.geo.graticule(); 

var svg = d3.select("body").append("svg") 
    .attr("width", width) 
    .attr("height", height); 

svg.append("defs").append("path") 
    .datum({type: "Sphere"}) 
    .attr("id", "sphere") 
    .attr("d", path); 

svg.append("use") 
    .attr("class", "stroke") 
    .attr("xlink:href", "#sphere"); 

svg.append("use") 
    .attr("class", "fill") 
    .attr("xlink:href", "#sphere"); 

svg.append("path") 
    .datum(graticule) 
    .attr("class", "graticule") 
    .attr("d", path); 

d3.json("world-50m.json", function(error, world) { 
    if (error) throw error; 

    svg.insert("path", ".graticule") 
     .datum(topojson.feature(world, world.objects.land)) 
     .attr("class", "land") 
     .attr("d", path); 

    svg.insert("path", ".graticule") 
     .datum(topojson.mesh(world, world.objects.countries, function(a, b) { return a !== b; })) 
     .attr("class", "boundary") 
     .attr("d", path); 
}); 

d3.select(self.frameElement).style("height", height + "px"); 
function circleMarker() { 
    var sizeScale = d3.scale.linear().domain([0,100,2000]).range([2,10,20]).clamp(true); 
    var randomDatapoint = "r" + Math.ceil(Math.random() * 7); 
    d3.selectAll("g.marker").selectAll("*").remove(); 
    d3.selectAll("g.marker").append("circle") 
    .attr("class", "metro") 
    .attr("r", function(d) {return sizeScale(d[randomDatapoint])}) 
    } 
function makeSomeMaps() { 
    map = d3.carto.map(); 




    d3.select("#map").call(map); 
    map.centerOn([-99,39],"latlong"); 
    map.setScale(4); 

    map.refresh(); 

cityLayer = d3.carto.layer.csv(); 
    cityLayer 
    .path("cities.csv") 
    .label("Metro Areas") 
    .cssClass("metro") 
    .renderMode("svg") 
    .x("x") 
    .y("y") 
    .clickableFeatures(true) 
    .on("load", function(){console.log(cityLayer.dataset())}); 

    map.addCartoLayer(cityLayer); 

} 



</script> 
<div id="map"> 
<button style="left: 340px;" class="markerButton" onclick="circleMarker();">Circle Marker</button> 
</div> 

</body> 
</html>

請找到鏈接到網站直播： http://www.ewelinawoloszyn.com/mymap/d3_projection03.html

也許它的東西做map.centerOn？非常感謝您的幫助。

來源

2016-10-30 Neko

我懷疑它是html/javascript的異步渲染性質。過去我遇到了類似的問題，我通過爲地圖和標記定義不同的圖層/組來解決此問題。例如：

var svg = d3.select("body").append("svg") 
    .attr("width", width) 
    .attr("height", height); 

var map = svg.append("g"); 
var markers = svg.append("g");

然後在這些預定義的圖層中添加地圖和標記。標記將出現在地圖頂部，因爲您在地圖圖層後面定義了它們的圖層。在你的情況下，你應該爲每個元素（格子層等）定義一個圖層

來源

2016-10-30 14:14:49 spyrostheodoridis

我可以問Theod如何定義這些圖層嗎？代碼應該是什麼樣子？我是javascript的新手。 – Neko

在svg後面定義它們。檢查編輯過的帖子。不幸的是，我無法重現您的代碼。 – spyrostheodoridis

我添加了代碼Theod，但標記仍然顯示在地圖下方：http：//www.ewelinawoloszyn.com/mymap/d3_projection03.html – Neko

d3 js標記不顯示在地圖上

回答

相關問題