javascript – d3js使最后一个圆圈成为超链接

好的……我正在使用 http://bl.ocks.org/mbostock/7607535的Zoomable Circle Packing
我打开了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;
 }

待办事项

如你所见,目前我只是在发出警报.此外,您可能希望在未放大等时禁用某些点击事件.再加上颜色.

另请注意,您需要修复标签的可见性等.

但我把它留给你:)

希望有所帮助.

javascript – d3js使最后一个圆圈成为超链接

解决方法

猜你在找的JavaScript相关文章