2

给定具有航点属性的飞机数组，其中包含由空格分开的纬度和经度字符串，这是在 D3 中在地图上绘制路线的最有效方法。是否有更类似于 D3 的方法将飞机数组作为数据参数和 d(waypoints) 传递给类似于 d3.svg.line() 生成器的 d3.geo.path() 生成器。

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

2

我建议事先生成数据（就像您的 parse 函数一样）以构建一个可以传递给选择的数组。

您可能会发现此示例很有帮助：http ://bl.ocks.org/erikhazzard/6201948

本质上，您将提前构建您的数组（links在此示例中调用），并将其传递给 .data() 调用。然后你可以输入和附加路径，并传入一个路径函数作为d属性。

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

...

    // Standard enter / update 
    var pathArcs = arcGroup.selectAll(".arc")
        .data(links);

    //enter
    pathArcs.enter()
        .append("path").attr({
            'class': 'arc'
        }).style({ 
            fill: 'none',
        });

    //update
    pathArcs.attr({
            //d is the points attribute for this path, we'll draw
            //  an arc between the points using the arc function
            d: path
        })
        .style({
            stroke: '#0000ff',
            'stroke-width': '2px'
        })
        // Uncomment this line to remove the transition
        .call(lineTransition); 

    //exit
    pathArcs.exit().remove();

这个问题还有更多信息：如何根据纬度/经度在 D3 地图上的两点之间画一条线/链接？

于 2013-08-13T21:18:27.700 回答