在 D3 中使用 font awesome 时链接不渲染答案

【问题标题】：Links not rendering when using font awesome in D3在 D3 中使用 font awesome 时链接不渲染
【发布时间】：2014-07-23 02:17:04
【问题描述】：

我目前正在构建一个应用程序，该应用程序使用 Mike Bostock 的 D3 布局示例绘制 github 存储库：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"; });

我找到了similar question，当我尝试使用该代码时，它成功渲染了字体很棒的图标，但现在可链接的文本虽然渲染了，但由于某种原因被隐藏了：

我尝试操作代码，但不知道如何让文本节点和链接文本也渲染。

另外，我感觉其他代码可能会干扰我的追加并导致此错误。全文如下：

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/

提前致谢！

【问题讨论】：

.style("fill-opacity", 1e-6); == 尽管技术上不透明，但几乎不可见。一些示例建议使用它来制作可点击但不可见的内容（尽管您确实应该为此使用 pointer-events 属性）。我不知道你为什么在这里使用它，但如果你去掉那一行，文本应该会很好地显示出来！
做到了！非常感谢！！
实际上，您可以在此线程上发帖，以便我将其标记为已回答吗？谢谢。
当然。实际上，我将其标记为关闭只是一个简单的错字，但由于 d3/svg 帖子通常不会正确关闭，因此我们最好不要将其显示为未答复。

标签： d3.js font-awesome

【解决方案1】：

文本图标正在显示，您可以从 DOM 和选择文本中看出，但它们几乎是完全透明的。

.style("fill-opacity", 1e-6); == 尽管技术上没有隐藏，但几乎不可见

一些示例建议使用几乎为零的不透明度来创建可点击但不可见的内容（尽管您确实应该为此使用 pointer-events 属性）。您一定是不小心复制了它。

【讨论】：