CODEWITHSUNDEEP
d3.js
user2637905
user2637905

Reputation: 203

how to give href to d3js text element

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)";
        }
    });

Upvotes: 5

Views: 13054

Answers (2)

Biovisualize
Biovisualize

Reputation: 2475

You can dynamically add an xlink:href like this:

var data = ['a', 'b', 'c'];

var svg = d3.select("body").append("svg")
    .attr({
        xmlns: "http://www.w3.org/2000/svg",
        xlink: "http://www.w3.org/1999/xlink",
        width: 100, 
        height: 300
    })
    .selectAll("a")
    .data(data)
    .enter().append("a")
    .attr({"xlink:href": "#"})
    .on("mouseover", function(d, i){ 
        d3.select(this) 
            .attr({"xlink:href": "http://example.com/" + d});
    })
    .append("text")
    .attr({x: 10, y: function(d, i){ return i*15+15; }})
    .text(function(d, i){ return d; });

Upvotes: 4

icanc
icanc

Reputation: 3577

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.

Upvotes: 6

Related Questions