d3.js 拆分“纬度,经度”字符串以进行圆形地理定位

knpiaxh1  于 2022-11-12  发布在  其他
关注(0)|答案(1)|浏览(165)

这里对d3和js来说是个新东西。我正在尝试从一个csv文件中对d3圆进行地理定位,这个文件有一个组合的lat/long字符串列(例如,“44.999572,-93.351774”。当csv中有单独的横向和纵向列时,我可以做到这一点,但是我还不能拆分一个组合字符串。我已经附上了可以工作的代码(有2列)--如何拆分一个latlon列?

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

d3.queue()
  .defer(d3.json, "map.geojson")     
  .defer(d3.csv, "circles.csv")   
  .await(ready);

svg
  .selectAll("myCircles")
  .data(data.sort(function(a,b) { return +b.n - +a.n }).filter(function(d,i){ return i<10 }))
  .enter()
  .append("circle")
    .attr("cx", function(d){ return projection([+d.lon, +d.lat])[0] })
    .attr("cy", function(d){ return projection([+d.lon, +d.lat])[1] })
    .attr("r", 5)
    .style("fill", function(d){ return color(d.n) })
    .attr("stroke", "black")
    .attr("stroke-width", 0)
    .attr("fill-opacity", .6);

谢谢你

whhtz7ly

whhtz7ly1#

如果您的circles.csv只有一列表示纬度和经度,比如latlon,您可以使用行转换函数来创建latlon这两个属性,并按原样使用当前代码。
下面是一个使用d3.csvParse的示例,但逻辑是相同的,只是在defer参数中添加了row函数:
第一个

相关问题