2

緯度と経度の文字列をスペースごとに個別に含む 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;
}
4

1 に答える 1