将超级链接添加到可缩放的d3圆圈包中

Question

I've been trying to add clickable hyperlinks to a zoomable d3 circle pack based on this code: http://bl.ocks.org/nilanjenator/4950148 , but I just can't get it to work. 我一直在尝试根据以下代码将可点击的超链接添加到可缩放的d3圆圈包中： http : //bl.ocks.org/nilanjenator/4950148 ，但我无法使其正常工作。 Ideally I'd link a link under the text label for the circle, but at this point a clickable label would be just as rad. 理想情况下，我会在圆的文本标签下链接一个链接，但是此时可单击的标签将与rad一样。

I'm sure its a misunderstanding of d3 on my part. 我敢肯定我对d3有误解。 I've researched several stack topics that should work: ( Hyperlinks in d3.js objects ) and here are my failed attempts. 我研究了几个应该起作用的堆栈主题：（ d3.js对象中的超链接），这是我失败的尝试。 I've also updated the json data file to include urls, ie. 我还更新了json数据文件以包含url，即。

{
 "name": "data",
 "children": [
  {"name": "Data", "size": 20544, "url":"http://katetempest.co.uk/audio"},
  {"name": "Ellington Willoughby", "size": 19788, "url": "http://wwww.ellingotnwilloughby.com"},
  {"name": "HELP", "size": 10349,"url":"http://en.wikipedia.org/wiki/Help!_%28album%29" },

  {

etc. 等等

First crash and burn..adding a xlink to either the circle or the text, or node as mentioned in the other stack questions. 首先崩溃并刻录..向圆形或文本或节点中添加xlink，如其他堆栈问题中所述。 This is where my d3 understanding breaks down. 这是我对d3的理解崩溃的地方。

vis.selectAll(".node")//also tried "cirlce" and "text"
 .append("svg:a").attr("xlink:href", function(d){ return d.url })
  .append("svg:text")
  .text(function(d) { return d.name; })
  .attr("dy", 3.5)
  .attr("dx", 5.5)
  .attr("text-anchor", "bottom");

I've added 我已经添加

<html xmlns:xlink="http://www.w3.org/1999/xlink">

to my html at the beginning of the project. 在项目开始时到我的html。 But nothing happends. 但是什么也没发生。

Next burn - Adding on "onclick" event to the text such as: 下次刻录-在文本上添加“ onclick”事件，例如：

  vis.selectAll("text")
  .data(nodes)
  .enter().append("svg:text")
  .attr("class", function(d) { return d.children ? "parent" : "child"; })
  .attr("x", function(d) { return d.x; })
  .attr("y", function(d) { return d.y; })
  .attr("dy", ".35em")
  .attr("text-anchor", "middle")
  .style("opacity", function(d) { return d.r > 20 ? 1 : 0; })
  .text(function(d) { return d.name; })
  .on("click",function(d){window.location = d.url}); ///<----Party here? Nope!

I'v also made sure to set my css as: 我还要确保将CSS设置为：

circle.child {
pointer-events: all;
}

Since I've read this gets in the way of tool-tips and general clickable thingamajigs, etc. 既然我已经读过了，这会妨碍工具提示和一般可点击的东西等等。

So what am I doing wrong? 那我在做什么错？ I'm pretty sure its my lack of understanding on which element to select and add the "svg:a" attr, but I'm stuck, which of course is a bummer. 我可以肯定地说，我对选择和添加“ svg：a”属性的元素缺乏理解，但是我被困住了，那当然是不愉快的事情。 Exponential thanks to the stack community for taking a crack at it, and apologizes if I over looked something trivial and wasted everyone's time. 指数感谢堆栈社区的努力，如果我过分看不起琐事并浪费大家的时间，我深表歉意。

Cheers! 干杯!

Answer 1

Thanks to the FernOfTheAndes comment I was able to get this all going. 多亏了FernOfTheAndes的评论，我才得以解决所有问题。 Just thought I'd post if someone else ran into this. 只是以为我会发帖，如果有人遇到这个问题。 I've modified the "onclick" circle event to only allow the link to work if you're at the lowest circle, otherwise its a bit messy...here you go: 我修改了“ onclick”圈子事件，仅当您处于最低圈子时才允许链接正常工作，否则它有点混乱...您可以在这里进行操作：

vis.selectAll("circle")
  .data(nodes)
  .enter().append("svg:circle")
  .attr("class", function(d) { return d.children ? "parent" : "child"; })
  .attr("cx", function(d) { return d.x; })
  .attr("cy", function(d) { return d.y; })
  .attr("r", function(d) { return d.r; })
  .on("click", function(d) {

    //Enables links when elements have no childern
    if(typeof d.children === 'undefined'){
      vis.selectAll("text")
         .style("pointer-events","all")
    }
    else
    {
      vis.selectAll("text")
         .style("pointer-events","none")
    }

    return zoom(node == d ? root : d); 

    });

and in the css to allow access to childless circles (I think): 并在CSS中允许访问无子女圈子（我认为）：

circle.child {
pointer-events: all;

} }

Thanks again to the stack community! 再次感谢堆栈社区！

将超级链接添加到可缩放的d3圆圈包中

问题描述

1 个解决方案

解决方案1
0 已采纳 2014-10-31 18:16:14

将超级链接添加到可缩放的d3圆圈包中

问题描述

1 个解决方案

解决方案1 0 已采纳 2014-10-31 18:16:14

解决方案1
0 已采纳 2014-10-31 18:16:14