interner Link für die Verwendung von Lightbox (fancyBox) in einem d3-Skript

Question

Ich bin ziemlich neu in der Webprogrammierung und es ist mehr oder weniger wie Suchen nach einer Funktion und versuchen, bis Sachen funktioniert. Also hast du eine Ahnung von meiner Fähigkeit;)

Ich versuche eine d3 Visualisierung zu erstellen (nach Mike Bostocks dendrogramm: http://bl.ocks.org/mbostock/4063570). Innerhalb der Baumstruktur möchte ich interne Links zu einem versteckten div (mit id = 'test') verwenden, das ein Lightbox-Skript verwendet (fancyBox: http://fancyapps.com/fancybox/).

Bisher mein d3 Skript für den Link folgenden Code erzeugt (von Firebug kopiert):

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

Wenn ich diesen Code irgendwo anders bin mit (auch in der d3-div) es funktioniert gut Öffnen der Lightbox div. Aber wenn ich innerhalb der d3 Canvas darauf klicke, funktioniert es nicht.

Der Code für die Knoten der Einrichtung und deren Eigenschaften (den obigen Code erstellen) ist wie folgt:

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

Außerdem, wenn ich eine externe URL setzen diese auch gut funktioniert. Aber wenn url "#test" ist, tut es das nicht.

Ich kann keine Artikel für ein solches Problem finden (vielleicht habe ich spezielle Wünsche? O.o). Gibt es eine andere Möglichkeit, interne Links einzurichten oder habe ich irgendein Zeichen verpasst? Ich frage mich, warum das außerhalb von d3 funktioniert, aber nicht innerhalb von d3.

Vielen Dank für Ihre Hilfe!

Answer 1

Ich löste dieses Problem und baute meinen eigenen Leuchtkasten nach Jim Nielsons Tutorial (https://webdesign.tutsplus.com/articles/super-simple-lightbox-with-css-and-jquery--webdesign-3528). Achten Sie auf die Kommentare zu den neuesten Versionen von jquery.

Die Lösung nach einem funktionierenden Leuchtkasten wie gewünscht ist, den Code irgendwo in das d3-Skript einzufügen (ich lege ihn zu Ende). Et voila!

Es ist nicht gut Blackbox in Ihrem eigenen Code zu haben :)

Answer 2

Erledigt.

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