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

これらのレイヤーを定義する方法をTheododに尋ねることはできますか？どのようにコードを表示する必要がありますか？私はjavascriptの初心者です。 – Neko

svgの直後に定義してください。編集した投稿を確認してください。残念ながら、あなたのコードを再現することはできません。 – spyrostheodoridis

コードTheodを追加しましたが、マーカーはまだマップの下に表示されています。http：//www.ewelinawoloszyn.com/mymap/d3_projection03.html – Neko

d3 jsマーカーが地図上に表示されない

答えて

関連する問題