Question

我一直在尝试根据以下代码将可点击的超链接添加到可缩放的d3圈包：http://bl.ocks.org/nilanjenator/4950148，但我无法让它工作。理想情况下，我会链接圆圈文本标签下的链接，但此时可点击的标签就像rad一样。

我确信这是对我的d3的误解。我已经研究了几个应该有效的堆栈主题：（Hyperlinks in d3.js objects），这是我失败的尝试。我还更新了json数据文件以包含网址，即

{
 "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" },

  {

等

首先崩溃并刻录..添加xlink到圆圈或文本，或其他堆栈问题中提到的节点。这是我的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");

我已添加

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

到我项目开头的html。但没有任何事情发生。

下一次刻录 - 添加＆＃34; onclick＆＃34;事件如下：

  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!

我还确保将我的CSS设置为：

circle.child {
pointer-events: all;
}

自从我读过这会妨碍工具提示和一般可点击的东西等等。

那么我做错了什么？我很确定我缺乏对选择哪个元素的理解并添加＆＃34; svg：a＆＃34; attr，但我被卡住了，这当然是一个无赖。由于堆栈社区对其进行了抨击，并且如果我过度看起来微不足道并且浪费了每个人的时间而道歉。

干杯！

Answer 1

感谢FernOfTheAndes的评论，我得到了这一切。只是想我会发帖，如果其他人遇到这个。我已经修改了“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); 

    });

并在css中允许访问无子女圈子（我认为）：

circle.child {
pointer-events: all;

}

再次感谢堆栈社区！

将hyeperlinks添加到可缩放的d3圆包中

1 个答案: