内部 link 用于在 d3 脚本中使用灯箱 (fancyBox)

Question

我对网络编程还很陌生，它或多或少像是在搜索一个函数并尝试直到一切正常。所以你对我的技能有所了解 ;)

我正在尝试构建 d3 可视化（根据 Mike Bostocks 树状图：http://bl.ocks.org/mbostock/4063570）。在树中，我想将内部 links 用于使用灯箱脚本 (fancyBox: http://fancyapps.com/fancybox/) 的隐藏 div（id='test'）。

到目前为止，我的 d3 脚本为 link 生成了以下代码（从 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 canvas 中点击它时它不起作用。

设置节点及其属性的代码（创建上面的代码）如下：

 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）。是否有另一种设置内部 links 的方法，或者我错过了任何标志？我想知道为什么这在 d3 外部有效，但在 d3 内部无效。

感谢帮助！

Answer 1

我解决了这个问题，按照 Jim Nielson 的教程 (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");

内部 link 用于在 d3 脚本中使用灯箱 (fancyBox)

internal link for using lightbox (fancyBox) in a d3 script

internal

lightbox

hyperlink

fancybox

d3.js