如何将文件中的经度和纬度绘制到d3上的世界地图上?

时间:2019-06-01 04:08:03

标签: javascript d3.js topojson

我有一个大文件,其中有181691行数据。我需要在带有d3的世界地图上绘制这些位置,但是我对投影并不真正熟练,并且对d3本身还是陌生的。有人可以帮我弄清楚如何去做吗?我附上我已经尝试过的JS代码

window.onload = function(){
var svgCanvas = d3.select("svg")
.attr("width", 1160)
.attr("height", 750)
.attr("class", "svgCanvas");
}

var projection = d3.geoMercator()

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


    var svg = d3.select("body").append("svg")


 d3.json("vis.json", function(d){
    console.log(d);  })

svg.selectAll("path")
        .data(d.features)
        .enter()
        .append("path")
        .attr("d", path)
        .style("fill", "grey")



svg.selectAll("circle")
         .data(d)
         .enter()
         .append("circle")
         .attr("cx", function(d) {
             return projection([d.longitude, d.latitude]);
         })
         .attr("cy", function(d) {
             return projection([d.longitude, d.latitude]);
         })
         .attr("r", 5)
         .style("fill", "yellow")
         .style("stroke", "gray")
         .style("stroke-width", 0.25)
         .style("opacity", 0.75)
         .append("title")    
         .text(function(d) {
            return d.country ;
         })

0 个答案:

没有答案