Wie werden projizierte Pfaddefinitionsstrings (nicht SVG-Elemente) aus einem GeoJSON-Datensatz mit D3 abgerufen?

Es gibt viele Beispiele zum Zeichnen von SVG-Pfaden aus D3-Geodaten mit den Pfadprojektionstools von D3. Zum Beispiel here's one I wrote earlier (D3 v3) und hier ist ein recent example using D3 v4.Wie werden projizierte Pfaddefinitionsstrings (nicht SVG-Elemente) aus einem GeoJSON-Datensatz mit D3 abgerufen?

Sie alle in etwa so aussehen:

svg.append("path") 
     .data(topojson.feature(datafile, datafile.objects.featureOfInterest)) 
     .attr("class", "land") 
     .attr("d", pathDefinitionObject);

... wo die Datendatei gelesen wird und mit einigen SVG verbunden sind, verknüpft leere Wege zu schaffen, dann ein D3 Pfad Definitionsobjekt mit einer bestimmten Projektion sieht assoziiert an den Daten und verwendet es, um SVG-Pfaddefinitionsstrings zu den d Attributen dieser Pfade hinzuzufügen.

Was ich will ist, diese Pfaddefinition Strings, sondern als Strings, ohne irgendwelche SVG zu berühren. Ich möchte diese Zeichenfolgen mit Raphael verwenden, damit ich Pfade in Browsern zeichnen kann, die SVG nicht unterstützen, da ein bestimmtes Projekt die Unterstützung von institutionellen Clients erfordert, die aufgrund älterer Softwareanforderungen und Unternehmensrichtlinien nicht von IE8 aktualisiert wurden (ich weiß , Ich kenne...).

D3 ist eindeutig in der Lage, diese Zeichenfolgen zu definieren, aber ich kann keine offensichtliche Möglichkeit sehen, das Pfaddefinitionsobjekt zur Ausgabe der Zeichenfolgen zu veranlassen, ohne mit einem DOM SVG-Element verknüpft zu sein.

Wie bekomme ich nur die Zeichenfolgen, ohne SVG auf der Seite?

Ich versuche, eine minimale Menge von D3 v4's "microlibraries" für diesen Einsatz, so Bonuspunkte für eine Antwort mit den wenigstenen Abhängigkeiten D3 (vor allem, wenn es kann D3-selection.js vermeiden, die ziemlich groß ist - im Idealfall I würde gerne nur die Datenverarbeitung von D3 verwenden und seine DOM-Manipulation für dieses Projekt überhaupt nicht verwenden.

Quelle

2016-07-27 user568458

verknüpften v4 Beispiel den minimalistischen Code Gebäudes, um nur die Landwege zu bekommen d Attribut wäre:

<!DOCTYPE html> 
<meta charset="utf-8"> 

<script src="//d3js.org/d3-array.v1.min.js"></script> 
<script src="//d3js.org/d3-geo.v1.min.js"></script> 
<script src="//d3js.org/d3-request.v1.min.js"></script> 
<script src="//d3js.org/d3-dispatch.v1.min.js"></script> 
<script src="//d3js.org/d3-collection.v1.min.js"></script> 
<script src="//d3js.org/topojson.v1.min.js"></script> 

<script> 

var projection = d3.geoAlbers() 
    .scale(1280) 
    .translate([500, 500]); 

var path = d3.geoPath() 
    .projection(projection) 
    .pointRadius(1.5); 

d3.json("https://gist.githubusercontent.com/mbostock/4090846/raw/d534aba169207548a8a3d670c9c2cc719ff05c47/us.json", function(error, us){ 
    if (error) throw error; 

    var topo = topojson.feature(us, us.objects.land); 
    console.log(path(topo)); 

}); 

</script>

Wenn Sie nicht d3.json verwenden, können Sie die d3-request, d3-dispatch und d3-collection Bibliotheken fallen.

Quelle

2016-07-27 13:31:31 Mark

Großartig! Ich kann nicht glauben, dass ich das Geojson-Objekt nur an das Pfadobjekt weitergeben musste! Dadurch wird eine Mega-Zeichenfolge für jedes Feature in der featureCollection in einer zusammengesetzten Zeichenfolge "M ... ZM ... ZM ... Z" ausgegeben, aber es ist einfach, eine 'for' -Schleife um' topo.features' herum auszuführen um sie zu trennen – user568458

Wie werden projizierte Pfaddefinitionsstrings (nicht SVG-Elemente) aus einem GeoJSON-Datensatz mit D3 abgerufen?

Antwort

Verwandte Themen