Links não são renderizados ao usar uma fonte incrível no D3
-
20-12-2019 - |
Pergunta
Atualmente estou construindo um aplicativo que representa graficamente repositórios do GitHub usando o exemplo de layout D3 de Mike Bostock encontrado aqui: http://mbostock.github.io/d3/talk/20111018/tree.html
Estou tentando renderizar uma fonte incrível em vez do círculo SVG e acredito que este é o código que está renderizando o círculo:
nodeEnter.append("svg:circle")
.attr("r", 1e-6)
.style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; });
Achei um pergunta semelhante e quando tentei usar esse código, ele renderizou com êxito os ícones incríveis da fonte, mas agora o texto vinculável, embora renderizado, está oculto por algum motivo:
Tentei manipular o código, mas não consigo descobrir como fazer com que o nó de texto e o texto do link também sejam renderizados.
Além disso, tenho a sensação de que esse outro código pode estar interferindo em meus anexos e causando esse erro.Aqui está na íntegra:
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, aqui está meu aplicativo atual em funcionamento no heroku:http://github-file-tree-generator.herokuapp.com/
Desde já, obrigado!
Solução
Os ícones de texto estão aparecendo, como você pode ver no DOM e na seleção do texto, mas são quase completamente transparentes.
.style("fill-opacity", 1e-6);
== quase invisível, embora não esteja tecnicamente oculto
Alguns exemplos recomendam usar uma opacidade quase zero para criar conteúdo clicável, mas invisível (embora você realmente deva usar a propriedade pointer-events para isso).Você deve ter copiado por acidente.