Mostrar informações ao passar o mouse sobre os polígonos de voronoi (em D3.js)

Question

Eu quero mostrar o nome da cidade e da população, relacionadas com a área de voronoi pairado.No entanto, com a forma como eu fiz a voronoi áreas, eu tinha que quer apenas enviar dados de coordenadas e ter todos os desenhos de trabalho, ou enviar mais dados e nenhum dos voronoi áreas são desenhados (b/c ele não pode ler o não-coordenar os dados, e eu não sei como especificar dentro de um array ou objeto de, pelo menos, ao criar voronois).Eu posso entrar estático ou dados irrelevantes para a dica de ferramenta (como eu fiz abaixo), mas não é nada de real conjunto de dados.

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

Eu coloquei um exemplo a utilização dos seus dados para demonstrar que Lars menciona.Eu criei uma variável de Voronoi como este:

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

qual foi tomada a partir desta Bl.ock por Mike.Isto permite-lhe especificar a matriz de coordenadas, e ainda têm ligado para o descritivo de dados que você deseja exibir.

Eu, então, criado o objeto para armazenar todos os dados em um formato que pode ser utilizado na Voronio polígonos 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);
});

Eu poderia ter especificado a conversão das coordenadas no voronio variável e, em seguida, utilizar a cities variável, mas eu não.

O atributo title foi utilizado para as dicas de ferramentas, mas esta pode ser substituída por algo mais apropriado, como o que você tem no seu código.O código é :

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

Houve alguns problemas com os dados.Eu tive que usar uma versão mais antiga do d3 (3.1.5) para obter o geojson para processar corretamente.Eu sei que tem havido um número de chnanges para o AlberUsa de projeção, por isso tenha cuidado, há um problema aí.

A localização de algumas das cidades parece errado para mim, por exemplo, San Fancisco aparece em algum lugar, na Flórida (isso me causou um pouco de confusão).Então eu verifiquei o original do arquivo csv e as coordenadas parecem estar errado, e a dados é a prestação de onde ele deve (não apenas onde eu esperaria de acordo com as etiquetas).

Agora colocar tudo junto, você pode encontrá-lo aqui