将hyeperlinks添加到zoomable d3圆形包中

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

我敢肯定它对d3的误解。我研究了几个应该可以工作的堆栈主题：（Hyperlinks in d3.js objects），这里是我失败的尝试。我还更新了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" }, 

    {

等

第一碰撞和burn..adding一个的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。但没有事情发生。

下一页燃烧 - 添加上“点击”事件的文本，如：

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; 
}

因为我读过这得到了工具提示和一般可点击的thingamajigs等方式

那么我做错了什么？我很确定它对我选择和添加“svg：a”属性的元素缺乏理解，但是我被卡住了，这当然是一个无赖。指数感谢堆栈社区对它进行破解，并且如果我看起来微不足道并且浪费了每个人的时间，我都表示歉意。

干杯！

来源

2014-10-31 Tim Gottgetreu

假设你从链接的例子中借用CSS，你的window.location技术不起作用，因为在CSS中你有'text {pointer-events：none}'。将它设置为'text {pointer-events：all}'。 – FernOfTheAndes 2014-10-31 17:13:48

啊，是的，这使得“onclick”文本事件起作用。感谢您指出，我改变了错误的CSS。干杯! – 2014-10-31 17:30:21

感谢FernOfTheAndes评论，我能够得到这一切。只是以为我会发布，如果有人遇到这个。我已经修改了“点击”圈子事件只允许链接，如果你以最低的圈工作，否则它的有点乱......在这里你去：

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;

}

再次感谢堆栈社会！

来源

2014-10-31 18:16:14

将hyeperlinks添加到zoomable d3圆形包中

回答

相关问题