title: Adding anchor tag to SVG circles appended with D3
body: <p>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.</p>
  
  <p>My symbols are generated/appended as follows:</p>
  
  <pre><code>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();
              })
  </code></pre>
  
  <p>I have tried:</p>
  
  <pre><code>d3.selectAll("#circles")
      .append("a")
      .attr("href", "google.com");
  </code></pre>
  
  <p>This, however simply wraps my entire group containing the symbols in an anchor tag.</p>
  
  <p>Please help!</p>