好的……我正在使用
http://bl.ocks.org/mbostock/7607535的Zoomable Circle Packing
我打开了flare.json
文件并开始搞乱它并且能够成功地操作它.它看起来像这样：
flare.json
@H_
502_5@{
"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",{"name": "Prof. E",{"name": "Prof. F",{"name": "Prof. G",{"name": "Prof. H",{
"name": "IBSS","children": [
{"name": "Prof. I",{"name": "Prof. J",{"name": "Prof. K",{"name": "","size": 0},{
"name": "E-Gov","children": [
{"name": "Prof. L",{"name": "Prof. M",{"name": "Prof. N",{
"name": "Muki","children": [
{"name": "Prof. O",{"name": "Prof. P",{"name": "Prof. Q",{"name": "Prof. V",{"name": "Schedule",{"name": "News",{"name": "Events",{"name": "Search","size": 0}
]
},"size": 0}
]
},
我现在想做的是尝试添加超链接.例如,我希望能够点击“ProfA”并转到我将创建的另一个html页面.我可以对flare.json进行修改吗？
我已经找到了一些帖子Post1 Post2 Post3
但没有什么工作它只是再缩小
这里完整的html文件,flare.json已经发布在这里(短片)
zoom.html：
@H_
502_5@<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',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>
您的设置中的问题主要源于您有指针事件：某些元素没有,例如叶子(最小的圆圈).
如果您更正并定义click事件以使其指向url而不是触发叶子的zoom事件,则会获得所需的行为.
我为你准备了一个小小提琴,请看这里：
http://jsfiddle.net/chroth/fkxcvtu9/3/
这个想法的核心在这里(点击功能)：
@H_
502_5@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();
}
}
}
并在这种风格的变化：
@H_
502_5@.node--root,.node--leaf {
pointer-events: all;
}
待办事项
如你所见,目前我只是在发出警报.此外,您可能希望在未放大等时禁用某些点击事件.再加上颜色.
另请注意,您需要修复标签的可见性等.
但我把它留给你:)
希望有所帮助.
