Collegamenti non rendering quando usi il carattere impressionante in D3

Question

Attualmente sto costruendo un'app che grafica GitHub Reposition utilizzando il layout del layout D3 di Mike Bostock qui trovato qui: http://mbostock.github.io/d3/talk/20111018/tree.html

Sto cercando di rendere un font fantastico invece del cerchio SVG e credo che questo sia il codice che rende il cerchio:

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

.

Ho trovato un Domanda simile e quando ho provato ad usare Quel codice, ha reso con successo le icone fantastiche dei font, ma ora il testo collegabile, però reso, è nascosto per qualche motivo:

Ho provato a manipolare il codice ma non riesce a capire come ottenere il nodo di testo e il testo del testo per rendere anche.

Inoltre, ho la sensazione che questo altro codice possa interferire con le mie aggiungendie e causare questo errore. Ecco tutto è pieno:

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

.

Infine, ecco la mia attuale app funzionante su Heroku: http://github-file-tree-generator.herokuapp.com/ < / P >.

Grazie in anticipo!

Answer 1

Le icone del testo si presentano, come si potrebbe dire dal DOM e dalla selezione del testo, ma sono quasi completamente trasparenti.

.style("fill-opacity", 1e-6);== Quasi invisibile anche se non tecnicamente nascosto

Alcuni esempi consigliano di utilizzare un'opacità quasi zero per creare contenuti cliccabili ma invisibili (anche se è necessario utilizzare la proprietà del puntatore-eventi per questo).Devi averlo copiato per caso.