緯度と経度の文字列をスペースごとに個別に含む waypoints プロパティを持つ航空機の配列が与えられた場合、これは D3 で地図上にルートを描画するための最も効率的な方法です。航空機の配列をデータ引数として渡し、d(waypoints) を d3.geo.path() ジェネレーターに似た d3.svg.line() ジェネレーターに渡す、より D3 風のアプローチはありますか。
var width = 500,
height = 500;
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
var projection = d3.geo.mercator()
.translate([width / 2, height / 2]);
var path = d3.geo.path()
.projection(projection);
draw();
function draw(){
for (var i = 0; i < aircraft.length; i++){
svg.append("path")
.datum(parse(aircraft[i].waypoints))
.attr("class", "route")
.attr("d", path);
}
}
function parse(waypoints){
var route;
var positions = [];
var points = waypoints.split(" ");
for (var i = 0; i < points.length - 1; i = i + 2) {
positions.push([parseFloat(points[i + 1]), parseFloat(points[i])]);
}
route = {
type: "LineString",
coordinates: positions
}
return route;
}