在 d3 地图上显示文本和直接通过超链接
Display text and direct via hyperlink on d3 Map
我有一个基于 topojson 文件的交互式 d3 地图 运行 (http://atlas.niu.edu/afd/)。 topojson的结构如下：
我想在鼠标悬停时显示 CWA 和城市，并重定向到每个要素几何的特定 URL。如果需要，我可以在每个 URL 中进行硬编码或将它们存储在单独的 csv 文件中。任何例子都会非常有帮助！
url重定向：
与监听.on('mouseover'的方式相同，可以监听.on("click"在用户点击某个状态时执行动作：
.on("click", function(d) {
window.open("https://en.wikipedia.org/wiki/" + d.properties.State, "_blank");
})
显示 CWA 和城市的鼠标悬停工具提示：
您可以将 svg:title 添加到您的状态节点，它会在悬停状态时显示给定的文本（遵循 mouseover/click 定义）：
.append("svg:title")
.text( function(d) { return d.properties.CWA + " - " + d.properties.City; });
这是一个demo
@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 对您不起作用，请告诉我。
我有一个基于 topojson 文件的交互式 d3 地图 运行 (http://atlas.niu.edu/afd/)。 topojson的结构如下：
我想在鼠标悬停时显示 CWA 和城市，并重定向到每个要素几何的特定 URL。如果需要，我可以在每个 URL 中进行硬编码或将它们存储在单独的 csv 文件中。任何例子都会非常有帮助！
url重定向：
与监听.on('mouseover'的方式相同，可以监听.on("click"在用户点击某个状态时执行动作：
.on("click", function(d) {
window.open("https://en.wikipedia.org/wiki/" + d.properties.State, "_blank");
})
显示 CWA 和城市的鼠标悬停工具提示：
您可以将 svg:title 添加到您的状态节点，它会在悬停状态时显示给定的文本（遵循 mouseover/click 定义）：
.append("svg:title")
.text( function(d) { return d.properties.CWA + " - " + d.properties.City; });
这是一个demo
@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 对您不起作用，请告诉我。