在voronoi多边形悬停时显示信息（在d3.js中）

Question

我想展示与voronoi区域相关的城市名称和人口徘徊在徘徊。但是，通过如何制作Voronoi区域，我必须只发送坐标数据并拥有所有图纸工作，或者发送更多数据，并且没有绘制的voronoi区域（b / c无法读取非坐标数据，我不知道如何在创建voronois时在数组或对象中指定。我可以输入工具提示的静态或无关数据（如下所示），但不是实际数据集的任何内容。

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

我将一个例子放在一起使用数据来演示什么提到了。我为voronoi创建了一个变量：

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

.

从这个 bl.ock 通过迈克。这允许您指定坐标数组，并且仍将它们连接到您要显示的描述性数据。

我然后创建了一个物体以使用可以在Voronio多边形中使用的格式存储所有数据：

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变量，但我没有。

标题属性用于工具提示，但这可以用更合适的东西替换，例如您在代码中拥有的东西。相关代码是：

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

.

数据有一些问题。我不得不使用旧版本的D3（3.1.5）来获取地理杂志正确呈现。我知道Alberusa投影有许多Chnanges，所以请注意那里有一个问题。

一些城市的位置对我来说似乎是错误的，例如San Fancisco出现在佛罗里达州的某个地方（这导致我一些混乱）。所以我检查了原始的CSV文件，坐标在那里似乎是错误的，数据呈现，在那里它应该（只是没有根据标签的期望）。

现在把它放在一起，你可以找到它这里