d3.js对象中的超链接 [英] Hyperlinks in d3.js objects
问题描述
我是一个完整的新手在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，
：3938
}
]
}
]
}
我现在想做的是尝试添加超链接。例如，我想要能够点击CNN并且去CNN.com。我可以对flare.json进行修改吗？
这很容易，只需添加一些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 标记的可点击链接：
nodeEnter.append （svg：a）
.attr（xlink：href，function（d）{return d.url;}）//< - 读取新的url属性
。 append（svg：rect）
.attr（y，-barHeight / 2）
.attr（height，barHeight）
.attr（width，barWidth）
.style（fill，color）
.on（click，click）; //< - 如果你喜欢
，请删除此处。 您可能想要删除点击处理程序通过删除.on（点击，点击），因为它可能会干扰SVG链接的默认行为。
点击您的 rect s现在应该引导您到相应的 url 。
SVG链接可能未在所有浏览器中完全实现。
或者，您可以修改 click 从 d.url 中读取URL，然后使用它通过JavaScript手动将浏览器重定向到该URL： window.location = d.url; 。然后，您不需要 svg：a 标记和 xlink 代码。虽然添加真实链接（不是脚本的）具有用户/浏览器可以决定要做什么（例如，在新标签/页面中打开）的好处。如果您的部分用户停用了JavaScript，也会有帮助。
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.
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
}
]
}
]
}
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"
}
]
Of course, in your d3 code you then need to append <svg:a> tags and set their xlink:href attribute.
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>
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
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.
Clicking on your rects should now lead you to the appropriate url.
SVG links might not be fully implemented in all browsers.
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屋！
