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에 요청할 수 있습니까? 코드는 어떻게 보일 것인가? 나는 자바 스크립트의 초보자이다. – Neko

svg 바로 뒤에 정의하십시오. 편집 된 게시물을 확인하십시오. 불행히도 코드를 재현 할 수 없습니다. – spyrostheodoridis

코드 Theod를 추가했지만 마커가 여전히지도 아래에 표시됩니다. http : //www.ewelinawoloszyn.com/mymap/d3_projection03.html – Neko

d3 js 표시가지도에 표시되지 않음

답변

관련 문제