Mostrar información al pasar el cursor sobre los polígonos de Voronoi (en D3.js)

Question

Quiero mostrar el nombre de la ciudad y la población relacionada con el área de Voronoi sobre la que se encuentra.Sin embargo, con la forma en que hice las áreas de Voronoi, tuve que enviar solo datos de coordenadas y hacer que todos los dibujos funcionaran, o enviar más datos y ninguna de las áreas de Voronoi se dibujó (porque no puede leer las áreas no-voronoi). coordinar datos, y no sé cómo especificarlos dentro de una matriz u objeto, al menos al crear voronois).Puedo ingresar datos estáticos o irrelevantes para la información sobre herramientas (como lo hice a continuación), pero nada del conjunto de datos real.

var tooltip = d3.select("body")
    .append("div")
    .style("position", "absolute")
    .style("z-index", "10")
    .style("visibility", "hidden")
    .text("a simple tooltip");

var voronoi = d3.geom.voronoi()
        .clipExtent([[0, 0], [w, h]]);

d3.csv("us-cities1.csv", function(d) {
    return [projection([+d.lon, +d.lat])[0], projection([+d.lon, +d.lat])[1]];
        }, function(error, rows) {
            vertices = rows;
            drawV(vertices);
            }
        );

function polygon(d) {
        return "M" + d.join("L") + "Z";
}

function drawV(d) {
    svg.append("g")
       .selectAll("path")
       .data(voronoi(d), polygon)
     .enter().append("path")
       .attr("class", "test")
       .attr("d", polygon)
       .attr("id", function(d, i){return i;})
       .on("mouseover", function(){return tooltip.style("visibility", "visible");})
       .on("mousemove", function(){return tooltip.style("top", (event.pageY-10)+"px").style("left",(event.pageX+10)+"px").text((this).id);})
       .on("mouseout", function(){return tooltip.style("visibility", "hidden");});

    svg.selectAll("circle")
       .data(d)
     .enter().append("circle")
       .attr("class", "city")
       .attr("transform", function(d) { return "translate(" + d + ")"; })
       .attr("r", 2);
        }

Answer 1

He elaborado un ejemplo utilizando sus datos para demostrar lo que menciona Lars.Creé una variable para Voronoi como esta:

var voronoi = d3.geom.voronoi()
    .x(function(d) { return (d.coords[0]); })
    .y(function(d) { return (d.coords[1]); });

que fue tomado de este Bloquear por Mike.Esto le permite especificar la matriz de coordenadas y aún tenerlas conectadas a los datos descriptivos que desea mostrar.

Luego creé el objeto para almacenar todos los datos en un formato que pudiera usarse en los polígonos de Voronio usando:

cities.forEach(function (d,i) {
    var element = { 
            coords: projection([+d.lon, +d.lat]),
            place: d.place,
            rank: d.rank,
            population: d.population
        };
    locCities.push(element);
});

Podría haber especificado la traducción de las coordenadas en la variable voronio y luego simplemente usar el cities variable, pero no lo hice.

El atributo de título se usó para la información sobre herramientas, pero se puede reemplazar con algo más apropiado, como lo que tiene en su código.El código relevante es:

.append("title") // using titles instead of tooltips 
    .text(function (d,i) { return d.point.place + " ranked " + d.point.rank; });

Hubo algunos problemas con los datos.Tuve que usar una versión anterior de d3 (3.1.5) para que geojson se renderizara correctamente.Sé que ha habido varios cambios en la proyección de AlberUsa, así que ten cuidado, hay un problema ahí.

La ubicación de algunas de las ciudades me parece incorrecta, por ejemplo, San Fancisco aparece en algún lugar de Florida (esto me causó cierta confusión).Así que verifiqué el archivo csv original y las coordenadas parecen estar incorrectas allí y los datos se muestran donde deberían (pero no donde esperaría según las etiquetas).

Ahora juntándolo todo podrás encontrarlo. aquí