Informationen anzeigen, wenn Sie mit der Maus über Voronoi-Polygone fahren (in D3.js)

Question

Ich möchte den Namen der Stadt und die Bevölkerung anzeigen, die sich auf das Voronoi-Gebiet beziehen, über dem der Mauszeiger steht.Aufgrund der Art und Weise, wie ich die Voronoi-Gebiete erstellt habe, musste ich jedoch entweder nur Koordinatendaten senden und dafür sorgen, dass alle Zeichnungen funktionieren, oder mehr Daten senden und keines der Voronoi-Gebiete wurde gezeichnet (weil es die Nicht-Voronoi-Gebiete nicht lesen kann). Koordinatendaten, und ich weiß nicht, wie ich sie innerhalb eines Arrays oder Objekts angeben soll, zumindest beim Erstellen von Voronois).Ich kann statische oder irrelevante Daten für den Tooltip eingeben (wie ich es unten getan habe), aber nichts aus dem tatsächlichen Datensatz.

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

Ich habe anhand Ihrer Daten ein Beispiel zusammengestellt, um zu veranschaulichen, was Lars erwähnt.Ich habe eine Variable für Voronoi wie folgt erstellt:

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

was daraus entnommen wurde Block von Mike.Auf diese Weise können Sie das Koordinatenarray angeben und es dennoch mit den beschreibenden Daten verbinden, die Sie anzeigen möchten.

Anschließend habe ich das Objekt erstellt, um alle Daten in einem Format zu speichern, das in den Voronio-Polygonen verwendet werden kann:

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

Ich hätte die Übersetzung der Koordinaten in der Voronio-Variablen angeben und dann einfach die verwenden können cities variabel, aber ich habe es nicht getan.

Für die Tooltips wurde das Titelattribut verwendet, das jedoch durch etwas Passenderes ersetzt werden kann, beispielsweise durch das, was Sie in Ihrem Code haben.Der relevante Code ist:

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

Es gab ein paar Probleme mit den Daten.Ich musste eine ältere Version von d3 (3.1.5) verwenden, damit das Geojson korrekt gerendert wurde.Ich weiß, dass es eine Reihe von Änderungen an der AlberUsa-Projektion gegeben hat. Seien Sie also vorsichtig, da es hier ein Problem gibt.

Die Lage einiger Städte scheint mir falsch zu sein, zum Beispiel erscheint San Fancisco irgendwo in Florida (das hat mich etwas verwirrt).Also habe ich die ursprüngliche CSV-Datei überprüft und festgestellt, dass die Koordinaten dort falsch zu sein scheinen und die Daten dort wiedergegeben werden, wo sie sollten (nur nicht dort, wo ich es laut Beschriftung erwarten würde).

Wenn Sie nun alles zusammenfügen, können Sie es finden Hier