Collegamenti non rendering quando usi il carattere impressionante in D3
-
20-12-2019 - |
Domanda
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!
Soluzione
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.