Показать информацию при наведении курсора на многоугольники Вороного (в D3.js)

Question

Я хочу показать название города и население, связанное с районом Вороного, над которым наведен курсор.Однако из-за того, как я создавал области Вороного, мне приходилось либо отправлять только данные координат и все рисунки работали, либо отправлять больше данных, и ни одна из областей Вороного не рисовалась (поскольку он не может прочитать не- координатные данные, а как указать внутри массива или объекта, по крайней мере при создании воронойса, я не знаю).Я могу ввести статические или нерелевантные данные для всплывающей подсказки (как я сделал ниже), но не что-либо из реального набора данных.

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

Я собрал пример, используя ваши данные, чтобы продемонстрировать то, что упоминает Ларс.Я создал переменную для Вороного следующим образом:

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

что было взято отсюда Блокировать Майк.Это позволяет вам указать массив координат и при этом привязать их к описательным данным, которые вы хотите отобразить.

Затем я создал объект для хранения всех данных в формате, который можно было бы использовать в полигонах Воронио, используя:

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

Я мог бы указать перевод координат в переменной voronio, а затем просто использовать cities переменная, но я этого не сделал.

Атрибут title использовался для всплывающих подсказок, но его можно заменить чем-то более подходящим, например тем, что есть в вашем коде.Соответствующий код:

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

Были некоторые проблемы с данными.Мне пришлось использовать более старую версию d3 (3.1.5), чтобы геоджсон отображался правильно.Я знаю, что в проекцию AlberUsa было внесено несколько изменений, поэтому будьте осторожны, здесь есть проблема.

Расположение некоторых городов мне кажется неправильным, например, где-то во Флориде появляется Сан-Фанциско (это вызвало у меня некоторое замешательство).Итак, я проверил исходный файл CSV, и координаты там кажутся неправильными, и данные отображаются там, где должны (только не там, где я ожидал, судя по меткам).

Теперь, сложив все это вместе, вы можете найти это. здесь