好的……我正在使用
http://bl.ocks.org/mbostock/7607535的Zoomable Circle Packing
我打开了flare.json文件并开始搞乱它并且能够成功地操作它.它看起来像这样：
我打开了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",{"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：
<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/
这个想法的核心在这里(点击功能)：
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;
}
待办事项
如你所见,目前我只是在发出警报.此外,您可能希望在未放大等时禁用某些点击事件.再加上颜色.
另请注意,您需要修复标签的可见性等.
但我把它留给你:)
希望有所帮助.
