在 d3 脚本中使用灯箱 (fancyBox) 的内部链接答案

【问题标题】：internal link for using lightbox (fancyBox) in a d3 script在 d3 脚本中使用灯箱 (fancyBox) 的内部链接
【发布时间】：2017-03-10 04:03:32
【问题描述】：

我对网络编程很陌生，它或多或少就像搜索一个函数并尝试直到工作正常为止。所以你知道我的技能了;)

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

到目前为止，我的 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 时，它也可以正常工作。但是当 url 是 '#test' 时它不会。

我找不到任何关于此类问题的文章（也许我有特殊的需求？O.o）。还有其他方法来设置内部链接还是我错过了任何迹象？我想知道为什么这在 d3 之外有效，但在内部无效。

感谢您的帮助！

【问题讨论】：

标签： d3.js hyperlink fancybox lightbox internal

【解决方案1】：

完成。

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

【讨论】：

完成了吗？如果您详细说明一下这段很棒的代码的作用，对未来的访问者会不会有帮助？

【解决方案2】：

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

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

在你自己的代码中有黑盒是不好的:)

【讨论】：