d3.geo.Pfad() zum zeichnen von mehreren Routen auf einer Karte

Gegeben ein array von Flugzeugen mit einem Wegpunkte-Eigenschaft, die eine Zeichenfolge von breiten-und Längengrade getrennt durch Leerzeichen, ist dies der effizienteste Ansatz zum zeichnen der Routen auf einer Karte in D3. Gibt es eine weitere D3-artige Ansatz, der vergeht, den Flugzeug-array als argument Daten und d(Wegpunkte) zu einer d3.geo.Pfad () - generator ähnlich wie ein d3.svg.Zeile () - generator.

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;
}
  • kann man nach einer Probe von Ihren Daten (oder dummy-Daten in der gleichen Struktur)?
InformationsquelleAutor K P | 2013-08-13
  1. 2

    Ich würde vorschlagen, das generieren der Daten vor der hand (wie die parse-Funktion hat) zu bauen, die ein array, das Sie passieren könnte, in eine Auswahl.

    Vielleicht finden Sie dieses Beispiel hilfreich: http://bl.ocks.org/enoex/6201948

    Im wesentlichen, Sie würden den Aufbau Ihrer array-vor der Zeit (genannt links in diesem Beispiel), und geben Sie in die .Daten () - Aufruf. Dann können Sie eingeben und fügen Sie die Pfade, und geben Sie einen Pfad-Funktion als d Attribut. 

        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();

    Es ist ein bisschen mehr info zu dieser Frage: Wie zeichnen Sie eine Linie /Verbindung zwischen zwei Punkten auf einer D3-map basierend auf Längen-und Breitengrad?

    InformationsquelleAutor ErikHazzard
Schreibe einen Kommentar