support sunburst mbostock examples javascript d3.js html5-canvas

javascript - mbostock - d3.js sunburst



Necesidad de escalar los datos ya proyectados usando d3 geoPath.projection(null) (2)

Echaré un vistazo a d3.geoTransform que debería ser más adecuado para mostrar datos cartesianos ya proyectados que d3.projection. De Mike Bostock:

Pero, ¿y si tu geometría ya es plana? Es decir, ¿qué sucede si solo desea tomar la geometría proyectada, pero aún así traducirla o escalarla para que se ajuste a la ventana gráfica?

Puede implementar una transformación de geometría personalizada para obtener control completo sobre el proceso de proyección.

Para ver un mejor ejemplo de lo que puedo hacer aquí (y para leer el resto de la cita), vea este Bl.ock

Por ejemplo, para su caso, podría usar algo como:

function scale (scaleFactor) { return d3.geoTransform({ point: function(x, y) { this.stream.point(x * scaleFactor, y * scaleFactor); } }); } path = d3.geoPath().projection(scale(2));

En cuanto a por qué se muestra la proyección personalizada

var project = d3.geoProjection(function(x,y){ return [x,y] });

Cambia / distorsiona la proyección, no lo sé (obtuve resultados similares al probar esta respuesta), pero si el resultado de esta proyección es utilizable, se puede escalar con bastante facilidad:

var project = d3.geoProjection(function(x,y){ return [x,y] }).scale(1000);

Según la documentación de d3 (ver 1.4) https://github.com/d3/d3-geo/blob/master/README.md#geoProjection , la proyección d3 debe establecerse en nulo para usar las coordenadas sin formato de los datos. ¿Cómo escalo si la proyección parece correcta usando nulo? Aquí está el código:

var path = d3.geoPath() .projection(null) .context(context); bands.features.forEach(function(d, i) { context.beginPath(); context.fillStyle = colors[i]; context.globalAlpha = .5; path(d); context.fill(); });

He intentado definir mi propia proyección, pero la proyección parece incorrecta. Aquí está el código

var project = d3.geoProjection(function(x,y){ return [x,y] }); var path = d3.geoPath() .projection(project) .context(context);


Gracias por tu sugerencia. Mi problema resultó no ser un problema de escala, sino un problema de transformación de matriz. Estoy usando el software d3marchingsquares.isobands y necesitaba transponer mis datos antes de enviarlos a los cuadrados de marcha.

Mi proyecto es crear un mapa similar a https://earth.nullschool.net/ pero usando Google Maps.

Estoy adaptando la demo de "Isobands from a geotiff with d3" de Roger Veciana http://bl.ocks.org/rveciana/de0bd586eafd7fcdfe29227ccbdcd511 . Esto está casi completo pero tiene problemas para cambiar el tamaño de la capa de lienzo. A continuación, voy a superponer la capa de lona enrollable de Danny Cochran sobre los contornos de temperatura. Actualicé el código de Danny Cochran para trabajar con la última versión de Google Map.