D3.js - d3.geo API: Unterschied zwischen den Versionen

Aus Wikizone
Wechseln zu: Navigation, Suche
Zeile 12: Zeile 12:
 
=== Mehrere JSON Dateien laden ===
 
=== 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.
 
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/rgdonohue/ede89ea3aff7c876fdcc (geojson)
 +
  http://bl.ocks.org/mapsam/6090056 (topojson)
 
  https://github.com/d3/d3-queue
 
  https://github.com/d3/d3-queue
 
<pre>
 
<pre>
Zeile 18: Zeile 19:
 
.defer(d3.json, 'states.json')
 
.defer(d3.json, 'states.json')
 
.defer(d3.json, 'cities.json')
 
.defer(d3.json, 'cities.json')
.await(makeMyMap);
+
.await(ready);
  
function makeMyMap(error, states, cities) {
+
function ready(error, states, cities) {
  
 
svg.append('path')
 
svg.append('path')

Version vom 23. Oktober 2018, 15:03 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

http://bl.ocks.org/mapsam/6081504 (Basic Topojson)

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/rgdonohue/ede89ea3aff7c876fdcc (geojson)
http://bl.ocks.org/mapsam/6090056 (topojson)
https://github.com/d3/d3-queue
queue()
	.defer(d3.json, 'states.json')
	.defer(d3.json, 'cities.json')
	.await(ready);

function ready(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');
}