d3js使最后一个圆圈成为超链接
[英]d3js Making last circle a hyperlink
问题描述
Okay... I am using the Zoomable Circle Packing from http://bl.ocks.org/mbostock/7607535 I opened the flare.json file and started messing with it and was able to manipulate it successfully. 
好的......我正在使用来自http://bl.ocks.org/mbostock/7607535的Zoomable Circle Packing我打开了flare.json文件并开始弄乱它并且能够成功地操作它。 It looks like this: 它看起来像这样：
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}
]
}, }，
What I want to do now, is to try to add hyperlinks. 我现在想做的是尝试添加超链接。 For example, I want to be able to click on "ProfA" and go to another html page i will creat. 例如，我希望能够点击“ProfA”并转到我将创建的另一个html页面。 Is there a modification I can make to flare.json that will do that? 我可以对flare.json进行修改吗？
i already found some posts Post1 Post2 Post3 我已经找到一些帖子Post1 Post2 Post3
but nothing is working it just zoom out again 但没有什么工作它只是再缩小
here complete html file, flare.json is already posted here(short part) 这里完整的html文件，flare.json已经发布在这里（短片）
zoom.html: zoom.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>
2 个解决方案
解决方案1
7 已采纳 2014-12-16 21:45:31
The problem in your setup mostly stems from the fact that you have pointer-events: none for certain elements, such as the leaves (smallest circles). 您的设置中的问题主要源于您有pointer-events: none某些元素pointer-events: none ，例如叶子（最小的圆圈）。
If you correct that and define the click event such that it directs to the url instead of triggering a zoom event for the leaves, you get the desired behavior. 如果您更正并定义click事件以使其指向url而不是触发叶子的zoom事件，则会获得所需的行为。
I put together a small fiddle for you, see here: http://jsfiddle.net/chroth/fkxcvtu9/3/ 我为你准备了一个小小提琴，请看这里： http ： //jsfiddle.net/chroth/fkxcvtu9/3/
The core of the idea is in here ( click function): 这个想法的核心在这里（ 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();
}
}
}
and in this change in the style: 并在这种风格的变化：
.node--root,
.node--leaf {
pointer-events: all;
}
TODOs 待办事项
As you can see, currently I am just shooting an alert . 如你所见，目前我只是在发出alert 。 Also, you might want to disable certain click events when not zoomed in etc. Plus work on the colors. 此外，您可能希望在未放大等时禁用某些点击事件。再加上颜色。
Also, note that you need to fix the visibility of the labels etc. 另请注意，您需要修复标签的可见性等。
But I leave that to you :) 但我把它留给你:)
Hope that helps. 希望有所帮助。
解决方案2
1 2015-02-03 08:14:23
Thanks Pinguin. 谢谢Pinguin。 It is working correctly for me, but I am not sure about the purpose for the i parameter in your function. 它对我来说是正常的，但我不确定函数中i参数的用途。 Here is a small modification that protects against urls that are undefined. 这是一个小修改，可以防止未定义的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();
}
}
}
Up vote from me due to this particular line of code, and being nice enough to wrap it into a function for simplicity. 由于这一特定的代码行，我的投票结果非常好，并且为了简单起见将其包装成函数。
if (d3.select(this).classed("node--leaf"))
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.