拆分"latitude, longitude"字符串以进行圆形地理位置

Question

d3&js在这里。我正试图从一个csv文件中定位d3个圆圈，该文件有一个组合的lat/long字符串列(例如"44.999572，-93.51774"(。当我在csv中有单独的lat-and-long列时，我可以做到这一点，但我无法拆分组合的字符串。我已经附上了有问题的代码(有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);

谢谢

Answer 1

如果您的circles.csv只有一列表示纬度和经度，比如latlon，那么您可以使用行转换函数来创建lat和lon这两个属性，并按原样使用当前代码。此外，由于您使用的是d3.queue，我认为您使用的则是D3版本4。

这里有一个使用d3.csvParse的例子，但逻辑是一样的，只需在defer参数中添加行函数：

const csv = `name,latlon
foo,"44,35"
bar,"-12,39"
baz,"17,-5"`;
const data = d3.csvParse(csv, row);
console.log(data)
function row(d) {
const latLonArray = d.latlon.split(",").map(e => +e);
d.lat = latLonArray[0];
d.lon = latLonArray[1];
return d;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.4.0/d3.min.js"></script>