我是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进行修改吗？
Juv*_*uve 59
这很简单,只需添加一些"关键":"价值"对.例:
"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("单击",单击)来删除单击处理程序(原始示例中存在),因为它可能会干扰SVG链接的默认行为.
点击你的rects现在应该引导你到相应的url.SVG链接可能未在所有浏览器中完全实现.
或者,您可以修改click处理程序以从中读取URL,d.url并使用该处理程序通过JavaScript手动将浏览器重定向到该URL : window.location = d.url;. 然后你不需要svg:a标签和xlink代码.虽然添加真实链接(不是脚本化链接)具有用户/浏览器可以决定做什么的好处(例如,在新标签/页面中打开).如果您的某些用户禁用了JavaScript,它也会有所帮助.
| 归档时间： |
|
| 查看次数： |
31399 次 |
| 最近记录： |