dynamisch einen einzigen County

Hier Projekt ist ein einfaches, aber inspirierend topojson eines einzelnen Staates:dynamisch einen einzigen County

https://bl.ocks.org/mbostock/7061976

Es von Daten aus einem json nur diesen Zustand enthalten, gezogen wird, wie folgt:

d3.json("va-counties.json", function(error, topo) { 
    if (error) throw error;

Was ich tun möchte, ist eine Provinz dynamisch zu projizieren. Angenommen, es gibt ein Tastaturereignis oder etwas, das eine Funktion ausführt, indem man die geparsten Daten liest, die Kreis-ID findet und ein Topojson-Merkmal nur dieses Kreises zurückgibt. Der Unterschied zwischen dem obigen Block und meinem Fall ist, dass meine JSON-Datei alle Grafschaften in Amerika hätte, aber ich würde nur eine Grafschaft auf einmal brauchen. Gibt es einen Weg, dies in D3 zu erreichen?

nur als einfacher Lackmus-Test, für Kreis id = 1000, habe ich versucht:

var current_county = topojson.feature(topo, topo.objects.counties).filter(function(d) { return d.id=1000;})), 
     bounds = path.bounds(county);

Doch hielt ich hartnäckig Fehler immer, egal wie viel ich mit ihm gearbeitet. Oder es würde aufhören, Fehler zu werfen, aber dennoch nicht "arbeiten". Vielleicht ist .filter() nicht das beste Werkzeug für den Job? Was sind andere Meinungen?

Danke für

Quelle

2017-01-22 Arash Howaida

Nun zunächst einmal Ihre filter Syntax ist falsch zu lesen, ich glaube, Sie einen Vergleich und nicht einen Auftrag:

d.id === 1000

Zweitens topojson.feature kehrt GeoJSON die in einem Objekt und es wird einfach nicht so filtern. Ihre beste Wette ist es auf dem Weg zum Filtern in:

// filter the geometries of the topojson the structure you want 
var geoCounty = topo.objects.counties.geometries.filter(function(d){ 
    return d.id === "51750"; 
}); 

// assign it back to the topojson object 
topo.objects.counties.geometries = geoCounty; 

// and off you go... 
var county = topojson.feature(topo, topo.objects.counties), 
    bounds = path.bounds(county);

voller Betrieb Code:

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

 
.county { 
 
    fill: #ccc; 
 
} 
 

 
</style> 
 
<body> 
 
<script src="//d3js.org/d3.v3.min.js"></script> 
 
<script src="//d3js.org/d3.geo.projection.v0.min.js"></script> 
 
<script src="//d3js.org/topojson.v1.min.js"></script> 
 
<script> 
 

 
var width = 500, 
 
    height = 300; 
 

 
var projection = d3.geo.conicConformal() 
 
    .parallels([38 + 02/60, 39 + 12/60]) 
 
    .rotate([78 + 30/60, 0]) 
 
    .scale(200000) 
 
    .translate([0, 0]); 
 

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

 
var svg = d3.select("body").append("svg") 
 
    .attr("width", width) 
 
    .attr("height", height); 
 

 
d3.json("https://jsonblob.com/api/ce96ca06-e1ce-11e6-90ab-03e5986c4e20", function(error, topo) { 
 
    if (error) throw error; 
 

 
    var geoCounty = topo.objects.counties.geometries.filter(function(d){ 
 
    return d.id === "51750"; 
 
    }); 
 

 
    topo.objects.counties.geometries = geoCounty; 
 

 
    var county = topojson.feature(topo, topo.objects.counties), 
 
     bounds = path.bounds(county); 
 

 
    projection 
 
     .translate([width/2 - (bounds[0][0] + bounds[1][0])/2, height/2 - (bounds[0][1] + bounds[1][1])/2]); 
 

 
    svg.append("path") 
 
     .datum(county) 
 
     .attr("class", "county") 
 
     .attr("d", path); 
 

 
}); 
 

 
</script>

Quelle

2017-01-24 01:01:39 Mark

, die jetzt so viel Sinn macht. Danke, dass du mir die richtige Konvention gezeigt hast. Und du hast Recht, ich hätte einen Vergleich '===' verwenden sollen. Ich versuche, Ihr Beispiel zu testen, aber ich habe Probleme mit den Bibliotheken. Ich bekomme immer "Fehler: Ungültiges oder unerwartetes Token". aus der Datei d3.projection.js. Ich weiß D3.js ist utf-8, ist das etwas anderes? Was soll ich machen?? –

@ArashHowaida, diese Fehlermeldung sollte Sie auf eine Codezeile verweisen. Wenn Sie es inspizieren, schaut etwas aus? Kommt der Fehler wirklich von 'd3.projection.js' oder Ihrem Code? Es wird für mich fast unmöglich sein, das für Sie zu debuggen, ohne es zu reproduzieren. – Mark

heißt es 'd3js.org/d3.geo.projection.v0.min.js' Zeile 1, nicht aus dem Haupt-HTML. Lassen Sie mich einige Tests ausführen, um zu sehen, welche Kodierung es ist. –

dynamisch einen einzigen County

Antwort

Verwandte Themen