在d3地图上显示文字和直接通过超链接

Question

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

我想在鼠标悬停时显示CWA和City，并重定向到每个要素几何的特定网址。我可以在每个URL中进行硬编码，或者在必要时将它们存储在单独的csv文件中。任何例子都会非常有用！

Answer 1

@ Xavier的答案是获得您所需要的一个好方法。虽然，这是另一种做同样的方法。

显然我找到了一些时间来使用您网站上的数据并在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);

对于链接（网址），我将paths包裹在锚标记内，并在属性中找到target=_blank" (open in a new window) which defaults to [d3JS](https://d3js.org) if no网址。

相关代码：

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

希望这种方法有所帮助，让我知道如果那个plunkr不适合你。

Answer 2

网址重定向：

与听.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