CODEWITHSUNDEEP
svgd3.jsappend
JordanBarber
JordanBarber

Reputation: 2101

Adding anchor tag to SVG circles appended with D3

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!

Upvotes: 1

Views: 5163

Answers (1)

link
link

Reputation: 2510

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.

Upvotes: 2

Related Questions