Estoy creando un mapa de población de los Estados Unidos. Tengo el mapa y la leyenda funcionando, pero hice un menú desplegable que me permite filtrar por carrera. Esto funciona y cambia los datos en el mapa y la leyenda, pero tengo un problema en el que el texto de la leyenda muestra el nuevo rango y todos los rangos anteriores cuando cambio el menú desplegable. ¿Hay alguna manera de tenerlo para que no se superponga al texto anterior sino que muestre solo el texto correcto? Estoy usando D3 con React.
Este es el código de mi leyenda:
svg.append("g") .attr("transform", "translate(580,20)") .append(() => Legend(color, {title: `2019 Population (x10^${exp})`, width: 300,tickFormat: ".1f"}))El código de mi variable de color:
const color = d3.scaleQuantile([start/divider,end/divider], d3.schemeYlOrRd[9])cambio de inicio y final dependiendo de cuán grande sea el tamaño de la población
Editar/Actualizar: Encontré una solución para resolver mi problema, pero no estoy seguro de si es la mejor práctica o si hay otra forma de hacerlo. Le di un color de fondo para que la información anterior quede tapada.
código:
svg.append("g") .attr("transform", "translate(580,20)") .append(() => Legend(color, {title: `2019 Population (x10^${exp})`, width: 300,tickFormat: ".1f"})) .append("rect") .attr("width", "100%") .attr("height", "100%") .attr("fill", "grey") svg.append("g") .attr("transform", "translate(580,20)") .append(() => Legend(color, {title: `2019 Population (x10^${exp})`, width: 300,tickFormat: ".1f"}))Cada vez que haces svg.append('g').transform(...).append(() => Legend()) estás agregando un nuevo elemento <g> .
En su lugar, almacene la selección <g> en una variable y luego elimine su contenido antes de agregar una nueva leyenda.
const legendG = svg.append('g').attr('transform', 'translate(580, 20)') function renderLegend(legendOptions) { legendG.selectAll('*').remove() // removes everything inside legendG.append(() => Legend(legendOptions)) } // now call the `renderLegend` function every time you change something from the menuY para responder a su pregunta si lo que hizo es una buena práctica. Diría que no, porque solo agrega elementos cada vez que el usuario elige algo en el menú y solo ocupa más y más memoria para almacenar el DOM. No es bueno para el rendimiento.