d3.js 对象中的超链接答案

【问题标题】：Hyperlinks in d3.js objectsd3.js 对象中的超链接
【发布时间】：2012-10-17 18:24:41
【问题描述】：

总的来说，我是 d3.js 或 java 的新手。我正在使用来自http://bl.ocks.org/1093025 的缩进树示例。我花了两个小时才在我的本地计算机上完成这项工作，所以这应该让您对我的技能水平有所了解。

我打开了flare.json 文件并开始对其进行处理，并且能够成功地对其进行操作。看起来是这样的

{
    "name": "Test D3",
    "children": [
        {
            "name": "News",
            "children": [
                {
                    "name": "CNN",
                    "size": 1000
                },
                {
                    "name": "BBC",
                    "size": 3812
                }
            ]
        },
        {
            "name": "Blogs",
            "children": [
                {
                    "name": "Engaget",
                    "size": 3938
                }
            ]
        },
        {
            "name": "Search",
            "children": [
                {
                    "name": "Google",
                    "size": 3938
                },
                {
                    "name": "Bing",
                    "size": 3938
                }
            ]
        }
    ]
}

我现在想做的是尝试添加超链接。例如，我希望能够点击“CNN”并访问 CNN.com。我可以对flare.json 进行修改吗？

【问题讨论】：

标签： d3.js

【解决方案1】：

这很简单，只需添加一些“键”：“值”对。示例：

        "children": [
            {
                "name": "Google",
                "size": 3938,
                "url":  "https://www.google.com"

            },
            {
                "name": "Bing",
                "size": 3938,
                "url":  "http://www.bing.com"

            }
        ]

当然，在您的 d3 代码中，您需要 append <svg:a> 标签并设置它们的 xlink:href 属性。

这里有一些可能对您有所帮助的 html 和 d3 代码。首先你需要在你的 html 文件中导入 xlink 命名空间：

<html xmlns:xlink="http://www.w3.org/1999/xlink">
...
</html>

然后在 d3 绘图代码中，为每个数据元素附加节点，然后用 svg:a 标记将要成为可点击链接的元素包装起来：

nodeEnter.append("svg:a")
  .attr("xlink:href", function(d){return d.url;})  // <-- reading the new "url" property
.append("svg:rect")
  .attr("y", -barHeight / 2)
  .attr("height", barHeight)
  .attr("width", barWidth)
  .style("fill", color)
  .on("click", click);  // <- remove this if you like

您可能希望通过删除 .on("click", click) 来移除点击处理程序（在原始示例中存在），因为它可能会干扰 SVG 链接的默认行为。

点击您的rects 现在应该会引导您到相应的url。 SVG 链接可能无法在所有浏览器中完全实现。

或者，您可以修改 click 处理程序以从 d.url 读取 URL，并使用该处理程序通过 JavaScript 手动将浏览器重定向到该 URL：window.location = d.url;。那么您就不需要svg:a 标记和xlink 代码。尽管添加真实链接（不是脚本链接）具有用户/浏览器可以决定做什么的好处（例如，在新标签/页面中打开）。如果您的某些用户禁用了 JavaScript，这也会有所帮助。

【讨论】：

关于哪些浏览器 支持 SVG 链接，请看这里：en.wikipedia.org/wiki/…
请注意，至少在 Chrome 中你不需要在任何地方声明任何命名空间，而在 D3.js v3 中你可以只写 .append('a') 而不是 .append('svg:a')。但是，您仍然需要写xlink:href。如果您仍然想要 DOM 中的命名空间，您现在似乎必须使用 this hack 以防止在使用 D3.js 插入它们时它们消失。
能否请您添加一个演示。请我非常需要它。
一个显示工作超链接的插件（单击节点矩形转到 cnn）：plnkr.co/edit/D4xy4x?p=preview
D3中创建元素后如何添加超链接？我有一个带有各种圆圈的选择，需要为每个圆圈附加一个超链接。我尝试了建议的解决方案，但我认为它假设我们在创建“”元素之后添加 D3 对象？我不精通网络编程，感谢任何帮助。