Question

鉴于一组航空器的航点属性包含一系列纬度和经度的空间，这是在D3中在地图上绘制路线的最有效方法。是否有更多的D3式方法将飞机阵列作为数据参数和d（航点）传递给类似于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;
}

Answer 1

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

您可能会发现此示例很有用：http://bl.ocks.org/enoex/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();

在这个问题中还有更多信息：How to draw a line / link between two points on a D3 map based on latitude / longitude?

d3.geo.path（）在地图上绘制多条路线

1 个答案: