I'm learning js, and decided to tackle D3 today.
I'm trying to expand on this example. I'd like to map an image over each node, and append text. I found this StackOverflow post that was a lot of help for getting started. I've worked details from it into the first example above and come up with this. It looks like something might be up with my attempts to append text and image to "g", and then g to the forces that control the graph.
Any insight would be very helpful. Thanks!
The main problem with that Bl.ock is that you haven't called your html file index.html - Bl.ocks isn't smart enough to recognise other names. The other things that I noticed was you were referencing d3 locally, with Bl.ocks this won't work unless you upload a d3 which would be pointless when you can just point to:
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
You also need to put this between your header tags. I've forked your Bl.ock and made these small changes here and it works just fine.
Of course those things won't help you append images. You could place the images as background to your circles as in this question or you could just add the image instead trying to attach it to a circle. I can't see exactly what's going on in you code but the general pattern would be something like:
d3.selectAll(".node")
.data(nodes).enter()
.append("image")
.attr("xlink:href", "url")
.attr("x", x stuff)
.attr("y", y stuff)
.attr("height", "16px")
.attr("width", "16px")
I couldn't see that you were binding the data (nodes) to the images which is important.
