Ссылки не рендеринга при использовании шрифта Awesome в D3
-
20-12-2019 - |
Вопрос
Я в настоящее время наращиваю приложение, которое графики out github repos, используя пример макета D3 Mike Bostock, найденный здесь: http://mbostock.github.io/d3/talk/20111018/tree.html
Я пытаюсь сделать шрифт-потрясающий шрифт вместо круга SVG, и я полагаю, что это код, который рендерирует круг:
nodeEnter.append("svg:circle")
.attr("r", 1e-6)
.style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; });
.
Я нашел Подобный вопрос и когда я пытался использовать Этот код, он успешно оказал шрифт-потрясающие значки, но теперь связанный текст, хотя визуальный, скрыт почему-то:
Я попробовал управлять кодом, но не может понять, как получить текстовый узел и текст ссылки, чтобы также рендерировать.
Также у меня есть ощущение, что этот другой код может вмешиваться в мои добавления и вызывая эту ошибку. Вот в полном объеме:
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);
.
Наконец, вот мое текущее рабочее приложение на Heroku: http://github-file-tree-generator.herokuapp.com/ < / P >.
Спасибо заранее!
Решение
Значки текста отображаются, как вы можете сказать из DOM и от выбора текста, но они почти полностью прозрачны.
.style("fill-opacity", 1e-6);
== почти невидимый, хотя не технически скрыт
Некоторые примеры рекомендуют использовать почти нулевую непрозрачность для создания кликабельного, но невидимого контента (хотя вы действительно должны использовать свойство «События указателя»).Вы, должно быть, скопировали его случайно.