d3.js 对象中的超链接 [英] Hyperlinks in d3.js objects
问题描述
总的来说，我是 d3.js 或 java 的完全新手.我正在使用 http://bl.ocks.org/1093025 中的缩进树示例.我花了两个小时才让它在我的本地计算机上运行，所以这应该能让你了解我的技能水平.
I am a complete novice at d3.js or java in general. I am using the indented tree example from http://bl.ocks.org/1093025. It took me two hours to get this to work on my local computer, so that should give you an idea of my skill level.
我打开了flare.json 文件并开始处理它，并且能够成功地操作它.看起来像这样
I opened the flare.json file and started messing with it and was able to manipulate it successfully. It looks like this
{
"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 进行修改吗?
What I want to do now, is to try to add hyperlinks. For example, I want to be able to click on "CNN" and go to CNN.com. Is there a modification I can make to flare.json that will do that?
推荐答案
这很容易，只需添加更多键":值"对.示例:
It is quite easy, just add some more "key" : "value" pairs. Example:
"children": [
{
"name": "Google",
"size": 3938,
"url": "https://www.google.com"
},
{
"name": "Bing",
"size": 3938,
"url": "http://www.bing.com"
}
]
当然，在你的 d3 代码中，你需要 append xlink:href 属性.
Of course, in your d3 code you then need to append <svg:a> tags and set their xlink:href attribute.
这里有一些 html 和 d3 代码，可能对您有所帮助.首先你需要在你的 html 文件中导入 xlink 命名空间:
Here is some html and d3-code that might be of help to you. First you need to import the xlink namespace in your html file:
<html xmlns:xlink="http://www.w3.org/1999/xlink">
...
</html>
然后在 d3 绘图代码中，您为每个数据元素附加节点，并使用 svg:a 标记将要成为可点击链接的元素包装起来:
Then in the d3 drawing code where you append nodes for each data element you wrap the element you want to be clickable links with an svg:a tag:
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 链接的默认行为.
You might want to remove the click handler (which is present in the original example) by deleting the .on("click", click) as it might interfere with the default behavior of SVG links.
点击你的 rect 现在应该会引导你到适当的 url.SVG 链接可能无法在所有浏览器中完全实现.
Clicking on your rects should now lead you to the appropriate url.
SVG links might not be fully implemented in all browsers.
或者，您可以修改 click 处理程序以从 d.url 读取 URL，并使用该处理程序通过 JavaScript 手动将浏览器重定向到该 URL:window.location = d.url;.那么您就不需要 svg:a 标签和 xlink 代码.尽管添加真实链接(不是脚本链接)的好处是用户/浏览器可以决定要做什么(例如，在新标签/页面中打开).如果您的某些用户禁用了 JavaScript，这也会有所帮助.
Alternatively you could modify the click handler to read the URL from d.url and use that one to manually redirect the browser to that URL via JavaScript: window.location = d.url;. Then you do not need the svg:a tag and the xlink code. Though adding a real link (not a scripted one) has the benefit that the user/browser can decide what to do (e.g., open in new tab/page). It also helps if some of your users have JavaScript disabled.
这篇关于d3.js 对象中的超链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
