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

我使用您的数据汇总了一个示例来演示Lars提到的内容。我为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）来正确渲染geojson。我知道AlberUsa投影有很多问题，所以要注意那里有一个问题。

一些城市的位置似乎对我不利，例如San Fancisco出现在佛罗里达州的某个地方（这引起了我一些困惑）。所以我检查了原始的csv文件，并且坐标似乎是错误的，并且数据正在呈现它应该的位置（根据标签不是我想要的地方）。

现在把它们放在一起就可以找到它here

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

1 个答案: