d3 스크립트에서 lightbox (fancyBox)를 사용하기위한 내부 링크

Question

저는 웹 프로그래밍에 익숙하지 않고 기능을 검색하고 물건이 작동 할 때까지 시도하는 것이 다소 다릅니다. 그래서 당신은 내 기술에 대한 생각을 가지고 있습니다.)

저는 d3 시각화를 작성하려고합니다 (Mike Bostocks dendrogramm : http://bl.ocks.org/mbostock/4063570 이후). 트리 내에서 라이트 박스 스크립트 (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에서) 라이트 박스 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 외부에서 왜 작동하는지 궁금해.

도움 주셔서 감사합니다.

Answer 1

짐 Nielsons 튜토리얼 (https://webdesign.tutsplus.com/articles/super-simple-lightbox-with-css-and-jquery--webdesign-3528) 후에 나 자신의 라이트 박스를 만들면서이 문제를 해결했습니다. jquery의 최신 버전에 대한 의견을 조심하십시오.

원하는 라이트 박스가있는 솔루션은 d3 스크립트에 코드를 포함시키는 것입니다 (필자는 마지막에 넣습니다). Et voila!

그것은 자신의 코드 : 완료

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