在d3脚本中使用lightbox（fancyBox）的内部链接

我对网络编程颇为陌生，它或多或少地像搜索funcion并尝试直到工作正常。所以你有我的技能的想法;）在d3脚本中使用lightbox（fancyBox）的内部链接

我想建立一个d3的可视化（后迈克博斯托克dendrogramm：http://bl.ocks.org/mbostock/4063570）。在树内，我想使用内部链接指向使用Lightbox脚本（fancyBox：http://fancyapps.com/fancybox/）的隐藏div（id ='test'）。

到目前为止，我的D3脚本生成以下的链接代码（从萤火虫复制）：

<a class="fancybox" x="10" href="#test"><text class="nodeText" dy=".35em" text-anchor="start" style="fill-opacity: 1;" x="10"test</text>

当我使用此代码其他地方（甚至在D3-DIV）它可以很好地打开lightbox div。但是当我在d3画布上点击它时，它不起作用。

用于设置节点和它们的属性（以创建上面的代码）的代码是如下：

nodeEnter.append("svg:a") 
     .attr("x", function(d) { 
      return d.children || d._children ? -10 : 10; 
     })  
     .attr("xlink:href", function(d){return d.url;}) // <-- reading the new "url" property 
     .attr('class', 'fancybox') 
    .append("text") 
     .attr("dy", ".35em") 
     .attr('class', 'nodeText') 
     .attr("text-anchor", function(d) { 
      return d.children || d._children ? "end" : "start"; 
     }) 
     .text(function(d) { 
      return d.name; 
     }) 
     .style("fill-opacity", 0);

此外，当我设置外部URL这个作品也细。但是，当url是'#test'时，它不会。

我无法找到任何有关此类问题的文章（也许我有特殊的欲望？O.o）。是否有另一种方式来设置内部链接或我错过了任何标志？我想知道为什么这可以在D3之外工作，但不在其中。

感谢您的帮助！

来源

2016-10-27 Maki

我解决了这个问题，在Jim Nielsons教程（https://webdesign.tutsplus.com/articles/super-simple-lightbox-with-css-and-jquery--webdesign-3528）之后构建了我自己的灯箱。留意最近版本的jQuery的评论。

根据需要有一个工作的灯箱后的解决方案是，将代码包含在某处（我把它放到最后）的d3脚本。 Et瞧！

这不是好事，黑盒在自己的代码:)

来源

2016-11-01 13:01:36 Maki

完成。

nodeEnter.append("image") 
.attr("xlink:href", function(d) { return d.icon; })   

.on("click", function(d){ 
    var link=document.createElement("a"); 
    link.id="lightLink"; 
    link.href= d.url; 
    link.rel="lightbox"; 
    this.appendChild(link); 
    document.getElementById("lightLink").click();  
}) 

.attr("x", "-12px") 
.attr("y", "-12px") 
.attr("width", "24px") 
.attr("height", "24px");

来源

2017-01-12 10:45:07

完成？如果你详细阐述了这段代码的功能，对未来的访问者会有帮助吗？ – rene

在d3脚本中使用lightbox（fancyBox）的内部链接

回答

相关问题