Ссылки не рендеринга при использовании шрифта Awesome в D3

Question

Я в настоящее время наращиваю приложение, которое графики 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 >.

Спасибо заранее!

Answer 1

Значки текста отображаются, как вы можете сказать из DOM и от выбора текста, но они почти полностью прозрачны.

.style("fill-opacity", 1e-6);== почти невидимый, хотя не технически скрыт

Некоторые примеры рекомендуют использовать почти нулевую непрозрачность для создания кликабельного, но невидимого контента (хотя вы действительно должны использовать свойство «События указателя»).Вы, должно быть, скопировали его случайно.