d3.js对象中的超链接

Question

d3.js对象中的超链接

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进行修改以实现这一点？

- Mr. Fegur

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Juve · Accepted Answer

很容易，只需添加更多的 "key" : "value" 键值对。例如:

        "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标记包装要成为可点击链接的元素：

Translated:

然后在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

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

现在，点击你的 rect 可以将你导向到相应的 url。在某些浏览器中，SVG 链接可能并没有完全实现。

或者你可以修改 click 处理程序来读取 d.url 中的 URL，并使用 JavaScript 手动重定向浏览器到该 URL：window.location = d.url;。那么你就不需要 svg:a 标签和 xlink 代码了。虽然添加一个真正的链接（而不是一个脚本链接）有益于用户/浏览器可以决定做什么（例如，打开新选项卡/页面）。如果一些用户禁用了 JavaScript，这也会有所帮助。