d3js 将最后一个圆圈设为超链接
d3js Making last circle a hyperlink
好的...我正在使用 http://bl.ocks.org/mbostock/7607535 中的可缩放圆形包装我打开了flare.json文件并开始弄乱它，并能够成功操纵它。它看起来像这样：
flare.json
{
"name": "flare",
"children": [
{
"name": "Kommunikation und Umwelt",
"children": [
{
"name": "Courses",
"children": [
{
"name": "AO-Psy.",
"children": [
{"name": "Prof. A", "size": 5731,"url":"google.com"},
{"name": "Prof. B", "size": 5731},
{"name": "Prof. C", "size": 5731}
]
},
{
"name": "E&E",
"children": [
{"name": "Prof. D", "size": 5731},
{"name": "Prof. E", "size": 5731},
{"name": "Prof. F", "size": 5731},
{"name": "Prof. G", "size": 5731},
{"name": "Prof. H", "size": 5731}
]
},
{
"name": "IBSS",
"children": [
{"name": "Prof. I", "size": 5731},
{"name": "Prof. J", "size": 5731},
{"name": "Prof. K", "size": 5731}
]
},
{"name": "", "size": 0},
{
"name": "E-Gov",
"children": [
{"name": "Prof. L", "size": 5731},
{"name": "Prof. M", "size": 5731},
{"name": "Prof. N", "size": 5731}
]
},
{
"name": "Muki",
"children": [
{"name": "Prof. O", "size": 5731},
{"name": "Prof. P", "size": 5731},
{"name": "Prof. Q", "size": 5731},
{"name": "Prof. V", "size": 5731}
]
},
{"name": "Schedule", "size": 5731},
{"name": "News", "size": 5731},
{"name": "Events", "size": 5731},
{"name": "Search", "size": 5731},
{"name": "", "size": 0}
]
},
{"name": "", "size": 0}
]
}，
我现在想做的是尝试添加超链接。例如，我希望能够单击"ProfA"并转到我将创建的另一个 html 页面。我可以对flare.json进行修改吗？
我已经找到了一些帖子帖子1 帖子2 帖子3
但没有任何效果，只是再次缩小
这里完整的HTML文件，flare.json已经发布在这里（简短部分）
缩放.html：
<html xmlns:xlink="http://www.w3.org/1999/xlink">
<meta charset="utf-8">
<style>
.node {
cursor: pointer;
}
.node:hover {
stroke: #000;
stroke-width: 1.5px;
}
.node--leaf {
fill: #14DCD2;
}
.label {
font: 20px "Helvetica Neue", Helvetica, Arial, sans-serif;
text-anchor: middle;
text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff, 0 -1px 0 #fff;
}
.label,
.node--root,
.node--leaf {
pointer-events: none;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var margin = 600,
diameter = 1920;
var color = d3.scale.linear()
.domain([-1, 5])
.range(["hsl(152,80%,80%)", "hsl(228,30%,40%)"])
.interpolate(d3.interpolateHcl);
var pack = d3.layout.pack()
.padding(2)
.size([diameter - margin, diameter - margin])
.value(function(d) { return d.size; })
var svg = d3.select("body").append("svg")
.attr("width", diameter)
.attr("height", diameter)
.append("g")
.attr("transform", "translate(" + diameter / 2 + "," + diameter / 2 + ")");
d3.json("flare.json", function(error, root) {
if (error) return console.error(error);
var focus = root,
nodes = pack.nodes(root),
view;
var circle = svg.selectAll("circle")
.data(nodes)
.enter().append("circle")
.attr("class", function(d) { return d.parent ? d.children ? "node" : "node node--leaf" : "node node--root"; })
.style("fill", function(d) { return d.children ? color(d.depth) : null; })
.on("click", function(d) { if (focus !== d) zoom(d), d3.event.stopPropagation(); })
var text = svg.selectAll("text")
.data(nodes)
.enter().append("text")
.attr("class", "label")
.style("fill-opacity", function(d) { return d.parent === root ? 1 : 0; })
.style("display", function(d) { return d.parent === root ? null : "none"; })
.text(function(d) { return d.name; })
//.on('click', function(d, i) {window.location.href = d.url;});
var node = svg.selectAll("circle,text")
node.each(function(d){
var thisNode = d3.select(this);
if (!d.children) {
thisNode.append("a")
.attr("xlink:href", function(d) { return d.url; })
.append("text")
.attr("dx", 8)
.attr("dy", 3)
.attr("text-anchor", "start")
.text(function(d) { return d.name; })
;
} else {
thisNode.append("text")
.attr("dx", -8)
.attr("dy", 3)
.attr("text-anchor", "end")
.text(function(d) { return d.name; });
}
});
d3.select("body")
.style("background", color(-1))
.on("dblclick", function() { zoom(root); });
zoomTo([root.x, root.y, root.r * 2 + margin]);
function zoom(d) {
var focus0 = focus; focus = d;
//.attr("xlink:href", url);
//.on('click', function(d, i) {window.location.href = d.url;});
var transition = d3.transition()
.duration(d3.event.altKey ? 7500 : 750)
.tween("zoom", function(d) {
var i = d3.interpolateZoom(view, [focus.x, focus.y, focus.r * 4 + margin]);
return function(t) { zoomTo(i(t)); };
});
transition.selectAll("text")
.filter(function(d) { return d.parent === focus || this.style.display === "inline"; })
.style("fill-opacity", function(d) { return d.parent === focus ? 1 : 0; })
.each("start", function(d) { if (d.parent === focus) this.style.display = "inline"; })
.each("end", function(d) { if (d.parent !== focus) this.style.display = "none"; });
}
function zoomTo(v) {
var k = diameter / v[2]; view = v;
node.attr("transform", function(d) { return "translate(" + (d.x - v[0]) * k + "," + (d.y - v[1]) * k + ")"; });
circle.attr("r", function(d) { return d.r * k; });
}
});
d3.select(self.frameElement).style("height", diameter + "px");
</script>
</html>
设置中的问题主要源于您对某些元素pointer-events: none的事实，例如叶子（最小的圆圈）。
如果更正该值并定义 click 事件，使其定向到 url 而不是触发叶子的缩放事件，则会获得所需的行为。
我为你整理了一个小提琴，看这里：http://jsfiddle.net/chroth/fkxcvtu9/3/
这个想法的核心在这里（click函数）：
function clickFct(d,i) {
if (d3.select(this).classed("node--leaf")) {
alert(d.url); //open URL here
} else {
if (focus !== d)
{
zoom(d);
d3.event.stopPropagation();
}
}
}
在样式的这种变化中：
.node--root,
.node--leaf {
pointer-events: all;
}
待办事项
如您所见，目前我只是在拍摄alert.此外，您可能希望在未放大等时禁用某些单击事件。加上颜色的工作。
另外，请注意，您需要修复标签等的可见性。
但我把这个留给你:)
希望有帮助。
谢谢 Pinguin。它对我来说工作正常，但我不确定您的函数中 i 参数的用途。下面是一个小的修改，可以防止未定义的 URL。
function onClickLeaf(d)
{
if (d3.select(this).classed("node--leaf"))
{
if(d.url !== undefined)
{
alert(d.url); //open URL here
}
}
else
{
if (focus !== d)
{
zoom(d);
d3.event.stopPropagation();
}
}
}
由于这行特定的代码，我投了赞成票，并且为了简单起见，足够好地将其包装成一个函数。
if (d3.select(this).classed("node--leaf"))
相关文章：
- 制作一个不带HTML a标记但在动画播放完毕后指向其他页面的超链接
- 我让一个图像看起来像一个可点击的按钮，但现在当我点击它时，它不会起到超链接的作用
- 禁用来自另一个html页面的html框架的超链接
- 如果td'这是jquery中的一个超链接
- 创建一个超链接(或按钮），用于执行 python 脚本，然后在脚本完成时重定向
- 通过jQuery单击另一个按钮时动态地将数据添加到超链接
- d3js 将最后一个圆圈设为超链接
- 我想要一个 jquery 日期选择器将默认日期更改为超链接中的文本
- 超链接以在单击时下载文件，并为每个下载增加一个字段
- 你如何记录.writeln(）一个超链接
- 您可以定义一个函数，在单击C#代码中定义的超链接时更改C#属性吗
- 如何在另一个html文件中获取超链接ID
- 使用JavaScript和html将图像和超链接从一个位置随机移动到另一个位置
- 在网页上选择一个超链接，并使用CasperJS将生成的网页内容存储在文本文件中
- 如何获取单击的超链接的id并在另一个页面中发布
- 在JQGrid中的一列中添加一个超链接，单击“超链接”将调用Jquery函数
- 在博客中调用一个外部javascript文件进行超链接
- 在iFrame和超链接中，单击一个iFrame中的链接以在另一个iFframe中打开
- 使一个弹出窗口出现在表中的超链接上
- 如何通过单击第二个超链接禁用一个超链接
