how to give href to d3js text element

Question

I m reading a csv file and want to plot headers(IDs) on the top i want to give href which will help me open a javascript window(new page). I tried using xlink:href: even though in the element href is written while mouseovering the IDs i dont have a pointer to click.

var geneldata = canvas.selectAll("text.gene")
    .data(data)
    .enter()
    .append("text")
    .transition()
    .delay(1)
    .duration(1500)
    .attr("class", "gene")
    .attr("font-family", "Arial")
    .attr("font-size", "12px")
    .attr("x", function (d) {
        var labelx = d.source;
        var labelx_len = genesetx.length;
        var labelxmatches = 0;

        for (var i = 0; i < labelx_len; i++) {
            if (genesetx[i] == labelx) {
                labelxmatches++;
            }
        }
        if (labelxmatches == 0) {
            genesetx.push(d.source);
            return genelistxscale;
        }


    })
    .attr("y", function (d) {

        var labelx = d.source;
        var labelx_len = genesety.length;
        var labelxmatches = 0;


        for (var i = 0; i < labelx_len; i++) {
            if (genesety[i] == labelx) {
                labelxmatches++;
            }
        }
        if (labelxmatches == 0) {
            genesety.push(d.source);
            genelistyscale = genelistyscale + wspace;
            return genelistyscale;
        }

    })
    .text(function (d) {
        var labelx = d.source;
        var labelx_len = geneset.length;
        var labelxmatches = 0;


        for (var i = 0; i < labelx_len; i++) {
            if (geneset[i] == labelx) {
                labelxmatches++;
            }
        }
        if (labelxmatches == 0) {
            geneset.push(d.source);
            return labelx;
        }
    });


var labeldata = canvas.selectAll("text.samples")
    .data(data)
    .enter()
    .append("text")
    .transition()
    .delay(1)
    .duration(1500)
    .attr("class", "samples")
    .attr("font-family", "Arial")
    .attr("font-size", "12px")
    .attr("xlink:href", function (d) {
        return "http://www.google.com";
    })
    .attr("x", function (d) {

        var labelx = d.target;
        var labelx_len = datasetx.length;
        var labelxmatches = 0;


        for (var i = 0; i < labelx_len; i++) {
            if (datasetx[i] == labelx) {
                labelxmatches++;
            }
        }
        if (labelxmatches == 0) {
            datasetx.push(d.target);
            xdatascale = xdatascale + wspace;
            return xdatascale;
        }
    })
    .attr("y", function (d) {
        var labelx = d.target;
        var labelx_len = datasety.length;
        var labelxmatches = 0;
        for (var i = 0; i < labelx_len; i++) {
            if (datasety[i] == labelx) {
                labelxmatches++;
            }
        }
        if (labelxmatches == 0) {
            datasety.push(d.target);
            return ydatascale;
        }

    })
    .attr("transform", function (d) {
        var labelx = d.target;
        var labelx_len = datasett.length;
        var labelxmatches = 0;


        for (var i = 0; i < labelx_len; i++) {
            if (datasett[i] == labelx) {
                labelxmatches++;
            }
        }
        if (labelxmatches == 0) {
            datasett.push(d.target);
            x1 = x1 + wspace;
            return "rotate(270 " + x1 + ",25)";
        }
    });

Answer 1

Instead of adding a href attribute you can just attached a click event to the text element. So, when the text element is clicked a new window would be opened with the url linked to the text element.

var labeldata = canvas.selectAll("text.samples")
    .data(data)
    .enter()
    .append("text")
    .transition()
    .delay(1)
    .duration(1500)
    .attr("class", "samples")
    .attr("font-family", "Arial")
    .attr("font-size", "12px")
    .on("click", function() { window.open("http://google.com"); }); // when clicked, opens window with google.com.

Here is an example fiddle.