0
146
VistasConexión de líneas fronterizas en el mapa del condado D3 JS de EE. UU. al pasar el mouse
Tengo un mapa JavaScript D3 de los EE. UU., y estoy tratando de crear un efecto de "sombra" al pasar el mouse, con una línea de borde distribuida uniformemente. Mi código (a continuación) tiene algo del efecto deseado, pero los bordes no se manifiestan por completo. La captura de pantalla a continuación es de pasar el mouse sobre un condado como ejemplo.
Mi archivo js se parece a:
# collect the map, set up nation and counties d3.json("https://cdn.jsdelivr.net/npm/us-atlas@3/counties-albers-10m.json").then( function(us) { svg.append("path") .datum(topojson.feature(us, us.objects.nation)) .attr("fill", "#f5f5f5") .attr("class", "nation") .attr("d", path) svg.selectAll("path.county") .data(topojson.feature(us, us.objects.counties).features) .join("path") .attr("id", function(d) { return d["id"] }) .attr("class", "county") .attr("fill", "#f5f5f5") .attr("stroke", "#ffffff") .attr("stroke-linejoin", "round") .attr("d", path) # add in my data d3.csv("file.csv").then( function(data) { ... data.forEach(function(d) { d3.select(`[id="${d['FIPS']}"]`) .attr("fill", function() { if (d["URL"] != "") {return getColor()} else {return "#f5f5f5"} }) .on("mouseover", function() { d3.select(`[id="${d['FIPS']}"]`) .style("stroke", "rgba(35, 31, 32, 0.1)") .style("stroke-width", 2) }) .on("mouseout", function() { d3.select(`[id="${d['FIPS']}"]`) .style("stroke", "#ffffff") .style("stroke-width", 1) }) } ) } )1 Respuestas
Responde la pregunta0
Pruebe node.parentElement.appendChild(node);
Luego de una revisión adicional, el índice z no es compatible con SVG 1.1.
En lugar de usar el índice z, SVG implementa el algoritmo del pintor para encontrar los elementos que están detrás del elemento seleccionado. Esto significa que cualquiera que sea el elemento que sigue dentro del dom, ese elemento estará encima de los otros elementos (como si fueran pintados más tarde). Eso significa que todo lo que necesita hacer para traer un elemento al frente es reordenar el elemento en el dom para convertirlo en el último nodo hermano . Así que todo lo que necesitas hacer es esto:
d3.select(`[id="${d['FIPS']}"]`) ... this.parentElement.appendChild(this); }