37

一般来说，我是 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进行修改吗？

4

1 回答 1

60

这很简单，只需添加更多“键”：“值”对。例子：

        "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>

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

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 链接的默认行为。

点击你rect的 s 现在应该引导你到适当的url. SVG 链接可能无法在所有浏览器中完全实现。

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

于 2012-10-28T13:27:45.577 回答