/*地図を表示するステージを追加*/
const stage = d3.select("svg");
const rotateStage = stage.append("g");
const seaLayer = rotateStage.append("g");
const landLayer = rotateStage.append("g");
const projection = d3.geoOrthographic() //投影法を指定
const path = d3.geoPath()//geometryをsvgのパスに変換する関数
d3.json("conuntries.topojson", function(json){ //地図情報の読み込み
const data = topojson.feature(json, json.objects.conuntries).features; //topojson->geojson変換
/*プロジェクション設定*/
projection
.rotate([0,0,0]) //x,y,z回転
.clipAngle(90); //表示する角度 180度を指定すると裏側の大陸まで表示される
/*パスジェネレーターにプロジェクションを設定*/
path.projection(projection);
/*海面を描画するためのパスをDOMに追加*/
seaLayer.append("path")
.datum({type: "Sphere"})
.attr("fill", "blue")
/*地図を表示するためのパスをDOMに追加*/
landLayer
.selectAll("path")
.data(data)
.enter()
.append("path")
.style("background-color", "blue")
.attr("fill", "green")
.attr("stroke", "#222")
.on("mouseover", function(){
d3.select(this).attr("fill", "red");
})
.on("mouseout", function(){
d3.select(this).transition().duration(500).attr("fill", "green");
})
});
/*地形を回転させる*/
const draw = () => {
let i = 0;
return () => {
const w = stage.node().clientWidth;
const h = stage.node().clientHeight;
rotateStage.attr("transform", `rotate(23.4, ${w/2}, ${h/2})`)//画面の中心を軸にステージを23.4度傾ける
i = i+0.5;
projection
.rotate([i,0,0]) //rotateのx値を増やして横に回転させる
.scale(d3.min([w, h]) / 2) //画面サイズを元に地球儀の大きさを決定
.translate([w/2, h/2]) //画面中央に表示されるように移動する
path.projection(projection); //path関数をアップデート
seaLayer.select("path").attr("d", path); //海面用パスを描画
landLayer.selectAll("path").attr("d", path); //地図用パスを描画
}
}
setInterval(draw(), 100); //定期的に回転させる
