Javascript d3js使最后一个圆成为超链接_Javascript_Html_Svg_D3.js_Circle Pack

Javascript d3js使最后一个圆成为超链接

javascript html svg d3.js

Javascript d3js使最后一个圆成为超链接,javascript,html,svg,d3.js,circle-pack,Javascript,Html,Svg,D3.js,Circle Pack,好的。。。我使用的是可缩放的圆形包装我打开了flare.json文件，开始处理它，并成功地对其进行了操作。看起来是这样的： flare.json { "name": "flare", "children": [ { "name": "Kommunikation und Umwelt", "children": [ { "name": "Courses", "children": [ { "name": "AO-Psy.", "children": [ {"na

好的。。。我使用的是可缩放的圆形包装我打开了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}
]

我现在想做的是尝试添加超链接。例如，我希望能够单击“ProfA”并转到我将创建的另一个html页面。我是否可以对flare.json进行相应的修改

我已经找到了一些帖子
但什么都没用，再缩小一次

此处已发布完整的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', 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>


.节点{
光标：指针；
}
.节点：悬停{
行程：#000；
笔划宽度：1.5px；
}
.node—叶{
填充：#14DCD2；
}
.标签{
字体：20px“Helvetica Neue”，Helvetica，Arial，无衬线；
文本锚定：中间；
文本阴影：01px0#fff，1px0#fff，-1px0#fff，0-1px0#fff；
}
.标签，
.node—根，
.node—叶{
指针事件：无；
}
var保证金=600，
直径=1920；
var color=d3.scale.linear（）
.domain（[-1,5]）
.范围（[“hsl（152,80%，80%），“hsl（228,30%，40%）”）
.插值（d3.插值EHCL）；
var pack=d3.layout.pack（）
.填充（2）
.尺寸（[直径-边距，直径-边距]）
.value（函数（d）{返回d.size；}）
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，直径）
.attr（“高度”，直径）
.附加（“g”）
.attr（“转换”、“平移”（“+diameter/2+”，“+diameter/2+”））；
d3.json（“flare.json”，函数（错误，根）{
if（error）返回控制台。error（error）；
var focus=root，
节点=包.节点（根），
看法
var circle=svg.selectAll（“circle”）
.数据（节点）
.enter（）.append（“圆”）
.attr（“类”，函数（d）{返回d.parent？d.children？”节点“：“节点-节点-叶”：“节点-节点-根”；}）
.style（“fill”，函数（d）{返回d.children？颜色（d.depth）：null；}）
.on（“单击”，函数（d）{if（focus！==d）zoom（d），d3.event.stopPropagation（）；}）
var text=svg.selectAll（“文本”）
.数据（节点）
.enter（）.append（“文本”）
.attr（“类别”、“标签”）
.style（“填充不透明度”，函数（d）{return d.parent==root？1:0；}）
.style（“display”，函数（d）{return d.parent==root？null：“none”；}）
.text（函数（d）{返回d.name；}）
//.on（'click'，函数（d，i）{window.location.href=d.url；}）；
var node=svg.selectAll（“圆形，文本”）
节点。每个（功能（d）{
var thisNode=d3。选择（此）；
如果（！d.children）{
thisNode.append（“a”）
.attr（“xlink:href”，函数（d）{return d.url；}）
.append（“文本”）
.attr（“dx”，8）
.attr（“dy”，3）
.attr（“文本锚定”、“开始”）
.text（函数（d）{返回d.name；}）
;
}否则{
thisNode.append（“文本”）
.attr（“dx”，-8）
.attr（“dy”，3）
.attr（“文本锚定”、“结束”）
.text（函数（d）{返回d.name；}）；
}
});
d3.选择（“主体”）
.样式（“背景”，颜色（-1））
.on（“dblclick”，function（）{zoom（root）；}）；
zoomTo（[root.x，root.y，root.r*2+margin]）；
功能缩放（d）{
var focus0=焦点；焦点=d；
//.attr（“xlink:href”，url）；
//.on（'click'，函数（d，i）{window.location.href=d.url；}）；
var transition=d3.transition（）
.持续时间（d3.event.altKey？7500:750）
.tween（“缩放”，功能（d）{
var i=d3.interpolateZoom（视图，[focus.x，focus.y，focus.r*4+边距]；
返回函数（t）{zoomTo（i（t））；}；
});
转换。选择全部（“文本”）
.filter（函数（d）{return d.parent==focus | | this.style.display===“inline”}）
.style（“填充不透明度”，函数（d）{return d.parent==focus？1:0；}）
.each（“开始”，函数（d）{if（d.parent==focus）this.style.display=“inline”}）
.each（“end”，函数（d）{if（d.parent！==focus）this.style.display=“none”；}）；
}
函数zoomTo（v）{
变量k=直径/v[2]；视图=v；
attr（“transform”，函数（d）{return”translate（“+（d.x-v[0]）*k+”，“+（d.y-v[1]）*k+”）；）；
circle.attr（“r”，函数（d）{返回d.r*k；}）；
}
});
d3.选择（self.frameElement）.样式（“高度”，直径+“px”）；

设置中的问题主要源于这样一个事实：对于某些元素，例如叶子（最小的圆），您有

指针事件：无
如果您纠正这一点并定义click
事件，使其指向url，而不是触发树叶的缩放事件，则可以获得所需的行为
我为你准备了一把小小提琴，看这里：

这个想法的核心在这里（单击
函数）：
在这种风格的变化中：
 .node--root,
 .node--leaf {
   pointer-events: all;
 }

待办事项
如您所见，目前我正在拍摄一个警报
。此外，您可能希望在未放大等情况下禁用某些单击事件，并对颜色进行处理
另外，请注意，您需要修复标签的可见性等
但我把这个留给你：）
希望能有所帮助。
谢谢Pinguin。它对我来说工作正常，但我不确定函数中I参数的用途。这里有一个小的修改，可以防止未定义的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();
        }
    }
}

由于这一行特殊的代码，我决定放弃投票，并且为了简单起见，我非常乐意将其包装成一个函数
if (d3.select(this).classed("node--leaf")) 

天哪，我很高兴你救了我，伙计，非常感谢你，不客气！请注意，我的答案只是一个开始——请看待办事项！祝你好运是的，我会继续努力的。如果我没有取得任何进展，可以问更多的问题吗？我认为stackoverflow没有问题限制：）（只要你表现出努力：）hay man你能帮我处理点击事件吗，因为我找不到答案？我从某人那里得到了一个答案，但我不知道怎么做，我真的希望你能帮助我
if (d3.select(this).classed("node--leaf"))