Question

我对网络编程很陌生，它或多或少都喜欢搜索功能并尝试直到工作正常。所以你对我的技能有所了解;）

我正在尝试构建一个d3可视化（在Mike Bostocks dendrogramm之后：http://bl.ocks.org/mbostock/4063570）。在树中我想使用内部链接到隐藏的div（使用id ='test'），它使用灯箱脚本（fancyBox：http://fancyapps.com/fancybox/）。

到目前为止，我的d3脚本为链接生成了以下代码（从firebug复制）：

<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中），它可以正常打开灯箱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是'#test'时它不会。

我找不到任何关于这样一个问题的文章（也许我不得不关注这些问题？O.o）。有没有其他方法来设置内部链接或我错过了任何标志？我想知道为什么这在d3之外有效但不在其中。

感谢您的帮助！

Answer 1

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

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

在您自己的代码中使用黑盒子并不好：）

Answer 2

完成。

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");

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

2 个答案: