在 d3 Map 上显示文本并通过超链接直接

Question

我有一个基于 topojson 文件的交互式 d3 地图正在运行 (http://atlas.niu.edu/afd/)。 topojson的结构如下：

我想在鼠标悬停时显示 CWA 和城市，并重定向到每个要素几何的特定 URL。如果需要，我可以在每个 URL 中硬编码或将它们存储在单独的 csv 文件中。任何例子都会非常有帮助！

Answer 1

网址重定向：

就像你听.on('mouseover'一样，你可以听.on("click"在用户点击一个状态时执行一个动作：

.on("click", function(d) {
  window.open("https://en.wikipedia.org/wiki/" + d.properties.State, "_blank");
})

鼠标悬停工具提示显示 CWA 和城市：

您可以将svg:title 添加到您的状态节点，当状态悬停时将显示给定的文本（在鼠标悬停/单击定义之后）：

.append("svg:title")
.text( function(d) { return d.properties.CWA + " - " + d.properties.City; });

---

这是demo

Answer 2

@Xavier 的回答是获得所需内容的一种好方法。虽然，这里有另一种方法可以做到这一点。

显然我找到了一些时间来使用您网站中的数据并将其用于 plunkr

这是一个相同的 plunkr：http://plnkr.co/edit/rlC38fQRU4oF3QslYUbz?p=preview

对于工具提示，我只是添加了一个简单的div 工具提示来获取CW 和City 属性。

// Define the div for the tooltip
var div = d3.select("body").append("div")   
 .attr("class", "tooltip")              
 .style("opacity", 0);

鼠标悬停时：

.on('mouseover',function(d) {
   d3.select(this).classed("selected",true);
   div.html('CWA: ' + d.properties.CWA + "<br/>"  + 'City: ' + d.properties.City)   
    .style("left", (d3.event.pageX) + "px")     
    .style("top", (d3.event.pageY - 28) + "px").style("opacity", .9);

对于链接 (url)，我将 paths 包装在 anchor 标记中，并在属性中找到 target=_blank" (open in a new window) which defaults to [d3JS](https://d3js.org) if nourl`。

相关代码：

svg.selectAll(".nwscwa")
.data(cwas)
.enter().append('a')
.attr('xlink:href', function(d) {
  return d.properties.link || "https://d3js.org";
}).attr('target', '_blank')

希望这种方法对您有所帮助，如果 plunkr 不适合您，请告诉我。