0
158
ViewsCómo centrar y escalar usando geoPath
Estoy filtrando un subconjunto de condados de EE. UU. con D3 y topojson. Puedo filtrar con éxito los condados y dibujarlos en un elemento SVG, pero ¿cómo cambio los límites del mapa para que se ajusten a los nuevos condados seleccionados? Representa el mapa como si los límites fueran todos los condados de EE. UU. frente a solo los filtrados.
var width=960, height=600, centered; const svgElement = d3.select(ref.current) .append("svg") .attr("preserveAspectRatio", "xMinYMin meet") .attr("viewBox", [0,0,width,height]); var path = d3.geoPath(); d3.json("https://d3js.org/us-10m.v2.json").then((d) => { d.objects.counties.geometries = d.objects.counties.geometries.filter(function(item) { return props.data.indexOf(item.id) > -1 }) var counties = topojson.feature(d, d.objects.counties).features; svgElement.append("g") .attr("class", "filled-territory") .selectAll("path") .data(counties) .enter() .append("path") .attr("d", path) }); Donde props.data es una matriz de ID de condado como:
[ "45001", "45003", "45007", "45083", "45087", "45091" ] Puedo hacer que se muestre así, pero no puedo entender cómo hacer que la ruta llene el SVG: 
1 answers
Answer question0
Este archivo en particular usa un sistema de coordenadas de píxeles (son datos geográficos proyectados), llena una extensión entre [0,0] y [960,600]. Debido a que usa este sistema de coordenadas, a menudo podemos usar la proyección predeterminada de d3.geoPath, una proyección nula que trata las coordenadas en su json como píxeles. Sin embargo, el geoPath por sí solo no proporciona una forma de centrar o escalar sus entidades por sí mismo.
Las proyecciones geográficas D3 vienen con un método llamado fitSize (también fitExtent u otros) que toma un objeto geojson y establece la escala de proyección y traduce las propiedades para centrar ese objeto geojson en la extensión especificada. Dado que ya tenemos datos proyectados, podemos usar d3.geoIdentity() que proporciona algunos métodos de proyección convenientes como fitSize pero, de lo contrario, no proyecta nuestros datos como ya están proyectados.
Para usar fitSize podemos usar lo siguiente:
// get a geojson feature collection object: var geojson = topojson.feature(d, d.objects.counties) // create a geoidentity "projection" and center the geojson: var projection = d3.geoIdentity() .fitSize([width,height],geojson) // set the path's projection: path.projection(projection); // Now access the array of features in the collection for use with .data(): var counties = geojson.features;Que se parece a:
var data = [ "45001", "45003", "45007", "45083", "45087", "45091" ] var width=500, height=500; const svgElement = d3.select("body") .append("svg") .attr("width", width) .attr("height", height); var path = d3.geoPath(); d3.json("https://d3js.org/us-10m.v2.json").then((d) => { d.objects.counties.geometries = d.objects.counties.geometries.filter(function(item) { return data.indexOf(item.id) > -1 }) var geojson = topojson.feature(d, d.objects.counties) var projection = d3.geoIdentity() .fitSize([width,height],geojson) path.projection(projection); var counties = geojson.features; svgElement.append("g") .attr("class", "filled-territory") .selectAll("path") .data(counties) .enter() .append("path") .attr("d", path) }); <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/3.0.2/topojson.min.js "></script>