Les liens ne s'affichent pas lors de l'utilisation de Font Awesome dans D3

Question

Je suis actuellement en train de créer une application qui représente graphiquement les dépôts github à l'aide de l'exemple de mise en page D3 de Mike Bostock trouvé ici : http://mbostock.github.io/d3/talk/20111018/tree.html

J'essaie de restituer une police géniale au lieu du cercle svg et je crois que c'est le code qui rend le cercle :

nodeEnter.append("svg:circle")
  .attr("r", 1e-6)
  .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; });

j'ai trouvé un question similaire et lorsque j'ai essayé d'utiliser ce code, il a réussi à restituer les superbes icônes de police, mais maintenant le texte pouvant être lié, bien que rendu, est masqué pour une raison quelconque :

J'ai essayé de manipuler le code, mais je n'arrive pas à comprendre comment obtenir le rendu du nœud de texte et du texte du lien.

De plus, j'ai le sentiment que cet autre code peut interférer avec mes ajouts et provoquer cette erreur.Le voici en intégralité :

nodeEnter.append("svg:a")
  // make the links open in a new page
  .attr("target", "_blank")

  .attr("xlink:href", function(d) { 
    console.log('d.name -->', d.name);
    // d.data.path "" + d.name
    var url = "https://" + URLtoArr[0] + "/" + URLtoArr[1] + "/" + URLtoArr[2] + "/" + "tree/master" + "/";
    // if path is set (if it is NOT the root node), add it on to the end
    if(d.data !== undefined) {
      url += d.data.path; 
    }
    return url; 
    // https://github.com/AndyLampert/repository-file-tree-generator/blob/master/public/css/main.css
  })

  .append("svg:text")
  .text(function(d) { return d.name; })
  .attr("x", function(d) { return d.children || d._children ? -10 : 10; })
  .attr("dy", ".35em")
  .attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; })
  .style("fill-opacity", 1e-6);

Enfin, voici mon application actuelle sur heroku :http://github-file-tree-generator.herokuapp.com/

Merci d'avance!

Answer 1

Les icônes de texte apparaissent, comme vous pouvez le constater à partir du DOM et de la sélection de texte, mais elles sont presque complètement transparentes.

.style("fill-opacity", 1e-6); == presque invisible bien que techniquement pas caché

Certains exemples recommandent d'utiliser une opacité presque nulle pour créer du contenu cliquable mais invisible (même si vous devriez vraiment utiliser la propriété pointer-events pour cela).Vous devez l'avoir copié par accident.