Mostra informazioni quando si libra su Voronoi Polygons (in D3.JS)

Question

Voglio mostrare il nome della città e la popolazione relativa all'area di Voronoi si librava.Tuttavia, con come ho realizzato le aree Voronoi, ho dovuto inviare solo i dati di coordinata e avere tutti i disegni funzionano o inviare ulteriori dati e nessuna delle aree Voronoi è disegnata (B / C non può leggere il non-Coordinare i dati e non so come specificare all'interno di un array o di un oggetto, almeno quando si crea Voronois).Posso inserire dati statici o irrilevanti per il tooltip (come ho fatto in basso), ma non nulla dal set di dati reale.

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

Ho messo insieme un esempio usando i tuoi dati per dimostrare cosa menziona lars. Ho creato una variabile per Voronoi come questa:

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

.

che è stato preso da questo bl.ock di mike. Ciò consente di specificare l'array delle coordinate e le sono ancora collegate ai dati descrittivi che si desidera visualizzare.

Ho quindi creato l'oggetto per memorizzare tutti i dati in un formato che potrebbe essere utilizzato nei poligoni Voronio utilizzando:

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

.

Avrei potuto specificare la traduzione delle coordinate nella variabile Voronio e poi ha appena utilizzato la variabile cities, ma non l'ho fatto.

L'attributo del titolo è stato utilizzato per i tooltips, ma questo può essere sostituito con qualcosa di più appropriato come quello che hai nel tuo codice. Il codice pertinente è:

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

.

Ci sono stati alcuni problemi con i dati. Ho dovuto usare una versione precedente di D3 (3.1.5) per ottenere il geojson per il rendering correttamente. So che ci sono stati un certo numero di chnanges alla proiezione Alberusa, quindi attenzione che c'è un problema lì.

La posizione di alcune delle città sembra sbagliata per me, ad esempio San Fancisco appare da qualche parte in Florida (questo mi ha causato qualche confusione). Così ho controllato il file CSV originale e le coordinate sembrano essere sbagliate in là e i dati stanno rendendo dove dovrebbe (solo non dove mi aspetterei in base alle etichette).

Ora mettendo tutto insieme puoi trovarlo qui