将鼠标悬停在voronoi多边形上时显示信息（在D3.js中）

我想显示与悬停在沃罗诺地区相关的城市名称和人口。然而，就我如何制作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);
        }

---

我用你们的数据做了一个例子来说明拉尔斯提到的内容。我为Voronoi创建了一个变量，如下所示：

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

这是迈克从这张照片上取的。这允许您指定坐标数组，并且仍然将它们连接到要显示的描述性数据

然后，我创建了一个对象，以一种可以在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

变量，但我没有

工具提示使用了title属性，但是可以用更合适的内容替换，例如代码中的内容。有关守则如下：

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

数据有一些问题。我不得不使用d3的旧版本（3.1.5）来正确渲染geojson。我知道AlberUsa投影有很多变化，所以要注意这里有一个问题

一些城市的位置对我来说似乎是错误的，例如圣凡基斯科出现在佛罗里达州的某个地方（这让我有些困惑）。所以我检查了原始的csv文件，其中的坐标似乎是错误的，数据呈现在它应该呈现的位置（只是不是根据标签我期望的位置）

---

现在把它们放在一起，您可以找到它

您可以为x和y指定访问器函数，为voronoi指定访问器函数（请参阅）。这允许您指定如何提取坐标，并且您可以拥有其他数据。我显然不理解如何使用该语法。你能举个简单的例子吗？我的数据有标题“排名”、“位置”、“人口”、“纬度”和“经度”。我尝试了许多变体，但我认为最有意义的变体是：d3.csv（“us-cities1.csv”，function（d）{svg.append（“g”）.selectAll（“path”）.data（voronoi.x（+d.lon）.y（+d.lat），polygon）…应该可以工作，但在mouseover函数中，必须添加代码才能访问数据（将自动作为mouseover函数的第一个参数传递）并设置工具提示文本。Scott Murray的Web交互式数据可视化教程。不幸的是，我使用的语法不起作用。它甚至不会创建voronoi。我得到以下错误：

Uncaught TypeError:无法读取未定义的属性“length”

除非我翻译，否则我似乎无法使用voronoi方法将我的数据放入一个只包含坐标的数组中。但如果是这样，我如何动态访问我想要绑定到这些坐标的其他信息？谢谢！我也找到了相同的信息，这让我找到了指定voronoi.x an.y访问器函数的适当位置。这本身就非常庞大。你将相关数据推送到数组堆栈是整洁的，我可以想象使用它来优雅地组合来自不同数据集的信息。