Add hyperlink to d3.js table rows and cells

Question

How can I add hyperlinks to d3-generated table rows and/or cells?

If I were following the same convention as adding hyperlinks to rects, lines, and other objects, after importing the xlink namespace, you append an a tag and set the hyperlink attribute, and then append your desired object, like so:

chartBody.selectAll("node")
    .data(dataset)
    .enter()
    .append("a")
    .attr("xlink:href", "http://stackoverflow.com")
    .append("line")
    ...

But when you change the character in the story from a rect or line to a table row or cell, it doesn't work...

tablebody.selectAll("row")
    .data(parsedtext)
    .enter().append("a")
    .attr("xlink:href", "http://stackoverflow.com")
    .append("tr")
    ...

This [question](http://stackoverflow.com/questions/9268645/d3-creating-a-table-linked-to-a-csv-file) might help. — user1614080, Sep 22 '13 at 01:05
Thanks for the suggestion. I've looked at that and it helps to render a table from data in a CSV file, but it doesn't help on how to append hyperlinks to different table elements. I've got my table rendering fine, but can't seem to append links to its contents. — chompion, Sep 22 '13 at 01:27

score 3 · Accepted Answer · answered Sep 22 '13 at 02:01

Ah, ok then I think what you'll need to use is selection.html, as in:

var data = ['http://stackoverflow.com', 'http://d3js.org/']

var para = d3.select("body").append("p");

para.selectAll("p")
        .data(data)
        .enter()
        .append("p")
        .html(function(d,i){ return "<a href=\"" + d + "\">" + "site_" + i + "</a>"; });

I think you've probably got it covered from here but here's the link to the selection.html api doc. Basically this allows you to append (in this case) some innerHTML property. Given what I think you're doing it might be worth reading the Subselections section on that page.

Great, I didn't even have to append paragraphs, worked well on rows and cells. Thanks — chompion, Sep 22 '13 at 02:30

score 0 · Answer 2 · answered Sep 22 '13 at 00:17

0

That's because rects and lines are SVG elements, while tables are HTML elements. (At least I can't find any reference to table elements within SVG.)

And as for HTML, there is no row element, nor is it valid HTML to enclose a table row within an anchor tag.

answered Sep 22 '13 at 00:17

Stephen Thomas

13,843
2
32
53

Thanks for that clarification. Makes sense to treat SVG elements and HTML elements differently. I'm not sure if you were implying this, but I also tried appending the anchor tag after adding the table row, and not only did it distort the rendered table by shortening the rows, the links still didn't work. Do you have any suggestion as to how to add the hyperlink appropriately then? I know I'm making a syntactical error. – chompion Sep 22 '13 at 01:30

Add hyperlink to d3.js table rows and cells

2 Answers2