Los enlaces no se rinden al usar la fuente impresionante en D3

Question

Actualmente estoy construyendo una aplicación que grá Pagos Github Repos usando el ejemplo de diseño D3 de Mike Bostock que se encuentra aquí: http://mbostock.github.io/d3/talk/20111018/tree.html

Estoy tratando de hacer una fuente increíble en lugar del círculo SVG y creo que este es el código que está haciendo el círculo:

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

Encontré una Pregunta similar y cuando intenté usar Ese código, rindió con éxito los iconos increíbles de la fuente, pero ahora el texto enlazable, aunque prestado, está oculto por alguna razón:

Intenté manipular el código, pero no puedo averiguar cómo obtener el nodo de texto y el texto de enlace para renderizar.

Además, tengo la sensación de que este otro código puede estar interfiriendo con mis adjuntos y causando este error. Aquí está todo:

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

Finalmente, aquí está mi aplicación de trabajo actual en Heroku: http://github-file-tree-generator.herokuapp.com/ < / p>

¡Gracias de antemano!

Answer 1

Los iconos de texto están apareciendo, como se puede decir desde el DOM y de la selección de texto, pero son casi completamente transparentes.

.style("fill-opacity", 1e-6);== casi invisible aunque no técnicamente oculto

Algunos ejemplos recomiendan usar una opacidad casi cero para crear contenido seleccionable pero invisible (aunque realmente debe usar la propiedad de los Eventos de punteros para eso).Debe haberlo copiado por accidente.