d3.js对象中的超链接
我是一个完整的新手在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这样做的修改？
这很容易，只需添加一些“关键”：“价值”对。 例：
"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链接的默认行为，因此需要移除click处理程序（原始示例中存在该处理程序）。
点击你的rect现在应该引导你到适当的url 。 SVG链接可能不会在所有浏览器中完全实现。
或者，您可以修改click处理程序以从d.url读取URL，并使用该处理程序通过JavaScript手动将浏览器redirect到该URL： window.location = d.url; 。 那么你不需要svg:a标签和xlink代码。 虽然添加一个真正的链接（不是脚本），但用户/浏览器可以决定做什么（例如，在新标签页中打开）。 这也有助于您的某些用户禁用JavaScript。
