當懸停在voronoi多邊形上時顯示信息（在D3.js中）

Question

我想顯示與voronoi區域相關的城市名稱和人口懸停。然而，在我如何製作voronoi區域時，我只能發送座標數據並且所有的圖紙都工作，或者發送更多的數據，並且沒有繪製voronoi區域（b/c它不能讀取非voronoi區域）座標數據，我不知道如何在數組或對象中指定，至少在創建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提到的內容。我創建了維諾像這樣的變量：這是從這個Bl.ock由邁克採取

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投影中有多個chnanges，因此請注意那裏存在問題。

一些城市的位置似乎對我來說是錯誤的，例如San Fancisco出現在佛羅里達州的某個地方（這使我有些困惑）。所以我檢查了原始的csv文件，並且座標似乎在那裏是錯誤的，並且數據正在渲染它應該在的位置（根據標籤而不是我所期望的）。

現在把他們放在一起，你可以找到它here