1

I'm currently building an app that graphs out github repos using Mike Bostock's D3 layout example found here: http://mbostock.github.io/d3/talk/20111018/tree.html

I'm trying to render a font-awesome font instead of the svg circle and I believe this is the code that is rendering the circle:

nodeEnter.append("svg:circle")
  .attr("r", 1e-6)
  .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; });

I found a similar question and when I tried to use that code, it successfully rendered the font-awesome icons, but now the linkable text, though rendered, is hidden for some reason:

linkable text rendered on the page but not visible

I tried manipulating the code but can't figure out how to get the text node and link text to also render.

Also, I have a feeling that this other code may be interfering with my appends and causing this error. Here is it is in full:

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);

Finally, here is my current working app on heroku: http://github-file-tree-generator.herokuapp.com/

Thanks in advance!

Community
  • 1
  • 1
Andy Lampert
  • 67
  • 2
  • 8
  • `.style("fill-opacity", 1e-6);` == almost invisible although not technically transparent. Some examples recommend it to make clickable but invisible content (although you should really use the pointer-events property for that). I have no idea why you're using it here, but if you get rid of that line the text should show up fine! – AmeliaBR Jun 02 '14 at 21:50
  • Actually, could you post on this thread so I can mark it as answered? Thanks. – Andy Lampert Jun 03 '14 at 15:08
  • sure. I'd actually marked it for closure as just a simple typo, but since d3/svg posts don't often get properly closed, we might as well not have it showing up as unanswered. – AmeliaBR Jun 03 '14 at 16:21

1 Answers1

1

The text icons are showing up, as you could tell from the DOM and from selecting text, but they are nearly completely transparent.

.style("fill-opacity", 1e-6); == almost invisible although not technically hidden

Some examples recommend using an almost-zero opacity to create clickable but invisible content (although you should really use the pointer-events property for that). You must have copied it over by accident.

AmeliaBR
  • 27,344
  • 6
  • 86
  • 119