Afficher les informations lors du survol des polygones de Voronoi (dans D3.js)

Question

Je veux montrer le nom de la ville et la population liée à la région de Voronoï survolée.Cependant, avec la façon dont j'ai créé les zones de Voronoï, j'ai dû soit envoyer uniquement des données de coordonnées et faire fonctionner tous les dessins, soit envoyer plus de données et aucune des zones de Voronoï n'est dessinée (car il ne peut pas lire les non- coordonner les données, et je ne sais pas comment spécifier dans un tableau ou un objet, du moins lors de la création de voronois).Je peux saisir des données statiques ou non pertinentes pour l'info-bulle (comme je l'ai fait ci-dessous), mais rien de l'ensemble de données réel.

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

J'ai rassemblé un exemple utilisant vos données pour démontrer ce que Lars mentionne.J'ai créé une variable pour Voronoi comme ceci :

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

qui a été tiré de ceci Bloc par Mike.Cela vous permet de spécifier le tableau de coordonnées tout en les connectant aux données descriptives que vous souhaitez afficher.

J'ai ensuite créé l'objet pour stocker toutes les données dans un format pouvant être utilisé dans les polygones de Voronio en utilisant :

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);
});

J'aurais pu spécifier la traduction des coordonnées dans la variable voronio puis simplement utiliser le cities variable, mais je ne l'ai pas fait.

L'attribut title a été utilisé pour les info-bulles, mais il peut être remplacé par quelque chose de plus approprié, comme ce que vous avez dans votre code.Le code concerné est :

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

Il y a eu quelques problèmes avec les données.J'ai dû utiliser une ancienne version de d3 (3.1.5) pour que le geojson s'affiche correctement.Je sais qu'il y a eu un certain nombre de changements dans la projection d'AlberUsa, alors méfiez-vous, il y a un problème.

L'emplacement de certaines villes me semble erroné, par exemple San Fancisco apparaît quelque part en Floride (cela m'a causé une certaine confusion).J'ai donc vérifié le fichier csv d'origine et les coordonnées semblent être erronées et les données sont rendues là où elles devraient (mais pas là où je m'attendrais selon les étiquettes).

Maintenant, en mettant tout cela ensemble, vous pouvez le trouver ici