Question

我是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进行修改吗？

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

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

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

d3.js对象中的超链接

1 个答案: