大佬教程收集整理的这篇文章主要介绍了javascript – d3js使最后一个圆圈成为超链接，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
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; }
待办事项
如你所见,目前我只是在发出警报.此外,您可能希望在未放大等时禁用某些点击事件.再加上颜色.
另请注意,您需要修复标签的可见性等.
但我把它留给你:)
希望有所帮助.
以上是大佬教程为你收集整理的javascript – d3js使最后一个圆圈成为超链接全部内容，希望文章能够帮你解决javascript – d3js使最后一个圆圈成为超链接所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。