Adding anchor tag to SVG circles appended with D3 - svg

Question

I have an SVG symbols map I have generated with D3. The map contains over 100 symbols. My question is, How can I add an anchor tag to each individual circle? I will pull the links for each symbol from an external CSV file, but at this point I cannot for the life of me figure out how to add an anchor to each symbol.
My symbols are generated/appended as follows:
circles.selectAll("circles")
.data(schools)
.enter().append("svg:circle")
.attr("cx", function(d,i) {return positions[i][0]})
.attr("cy", function(d,i) {return positions[i][1]})
.attr("r", function(d,i) {return 6})
.attr("i", function(d,i) {return i})
.attr("class", "symbol")
.on("mouseover", function(d,i){
var index = $(this).attr("i");
// console.log(d); ****This is all the data - ie: Name, lat, long, index, state, etc..
return show_bubble(d, index);
}).on("mouseout", function(){
return hide_bubble();
}).on("mousemove", function() {
return move_bubble();
})
I have tried:
d3.selectAll("#circles")
.append("a")
.attr("href", "google.com");
This, however simply wraps my entire group containing the symbols in an anchor tag.
Please help!

Answer 1

The way I usually do text in circles is I do another binding of the data, but instead of appending a circle, I would append text.
So the code could look like this:
circles.selectAll("circle-text")
.data(schools)
.enter().append("text")
.attr("x", function(d,i) {return positions[i][0]})
.attr("y", function(d,i) {return positions[i][1]})
.text( function (d) { return "Hello World" });
And then if you want anchor tags instead of plain text, try reading this example: Hyperlinks in d3.js objects
It seems you need a special element: "svg:a" in order to create hyperlinks.
Hope this helps.