D3.js - d3.geo API: Unterschied zwischen den Versionen
Aus Wikizone
Steff (Diskussion | Beiträge) |
Steff (Diskussion | Beiträge) |
||
| Zeile 9: | Zeile 9: | ||
== Troubleshooting == | == Troubleshooting == | ||
=== Mehrere JSON Dateien laden === | === Mehrere JSON Dateien laden === | ||
| − | Hier sollte man zuerst die Daten über einen Queue laden. Wenn nicht kann man die Projection nicht zuverlässig anwenden. | + | Hier sollte man zuerst die Daten über einen Queue laden. Wenn nicht kann man z.B. die Projection nicht zuverlässig anwenden. Problematisch ist die synchrone Ausführung aller d3 Renderings. Wenn in einem eine Projektion definiert wird kann es z.B. sein dasss diesen bei der Ausführung des anderen Objekts noch nicht verfügbar ist. |
http://bl.ocks.org/mapsam/6090056 | http://bl.ocks.org/mapsam/6090056 | ||
| + | https://github.com/d3/d3-queue | ||
<pre> | <pre> | ||
queue() | queue() | ||
| Zeile 16: | Zeile 17: | ||
.defer(d3.json, 'cities.json') | .defer(d3.json, 'cities.json') | ||
.await(makeMyMap); | .await(makeMyMap); | ||
| + | |||
function makeMyMap(error, states, cities) { | function makeMyMap(error, states, cities) { | ||
| + | |||
svg.append('path') | svg.append('path') | ||
.datum(topojson.feature(states, states.objects.usStates)) | .datum(topojson.feature(states, states.objects.usStates)) | ||
.attr('d', path) | .attr('d', path) | ||
.attr('class', 'states'); | .attr('class', 'states'); | ||
| + | |||
svg.selectAll('.cities') | svg.selectAll('.cities') | ||
.data(cities.features) | .data(cities.features) | ||
Version vom 23. Oktober 2018, 14:08 Uhr
Siehe auch:
d3.js
Links
http://enjalot.github.io/intro-d3/maptime/geo/#data // http://bl.ocksplorer.org/#/search/d3.geo http://enjalot.github.io/intro-d3/maptime/examples/ https://github.com/d3/d3-geo (d3/d3-geo Erweiterung)
Beispiele
Troubleshooting
Mehrere JSON Dateien laden
Hier sollte man zuerst die Daten über einen Queue laden. Wenn nicht kann man z.B. die Projection nicht zuverlässig anwenden. Problematisch ist die synchrone Ausführung aller d3 Renderings. Wenn in einem eine Projektion definiert wird kann es z.B. sein dasss diesen bei der Ausführung des anderen Objekts noch nicht verfügbar ist.
http://bl.ocks.org/mapsam/6090056 https://github.com/d3/d3-queue
queue()
.defer(d3.json, 'states.json')
.defer(d3.json, 'cities.json')
.await(makeMyMap);
function makeMyMap(error, states, cities) {
svg.append('path')
.datum(topojson.feature(states, states.objects.usStates))
.attr('d', path)
.attr('class', 'states');
svg.selectAll('.cities')
.data(cities.features)
.enter()
.append('path')
.attr('d', path.pointRadius(5))
.attr('class', 'cities');
}