Menu
I want to add a link to a table that I create from tabular data using d3. Take a quick look at my snippet:
var data = [
{'Engine':'Google', 'Founded':'1998', 'Monthly-Visitors':4840295000, 'Site':'www.google.com'},
{'Engine':'Baidu', 'Founded':'2000', 'Monthly-Visitors':1471079000, 'Site':'www.baidu.com'},
{'Engine':'Yahoo', 'Founded':'1995', 'Monthly-Visitors':1038375000, 'Site':'www.yahoo.com'},
{'Engine':'Bing', 'Founded':'2009', 'Monthly-Visitors':203482000, 'Site':'www.bing.com'},
{'Engine':'AOL', 'Founded':'1991', 'Monthly-Visitors': 39961000, 'Site':'www.aolsearch.com'}
];
var columns = ['Engine', 'Founded', 'Monthly-Visitors', 'Site'];
var table = d3.select('body').append('table'),
thead = table.append('thead'),
tbody = table.append('tbody');
thead.append('tr')
.selectAll('th')
.data(columns)
.enter()
.append('th')
.text(function(column) {return column; });
var rows = tbody.selectAll('tr')
.data(data)
.enter()
.append('tr');
var cells = rows.selectAll('td')
.data(function(row) {
return columns.map(function(column) {
return { column: column, value: row[column]};
});
})
.enter()
.append('td')
.text(function(d) {
if (d.column === 'Site') {
//console.log('now what?')
}
return d.value;
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="//d3js.org/d3.v3.min.js"></script>
</head>
<body>I have created the table, but I'm not sure how to make the rows containing the websites a clickable link. In the past I have used:
d3.select('.links').append('div')
.append('a')
.attr('href', 'http://www.google.com')
.append('text')
.html('Click here to go to a search engine.');
However I can't figure out how to use this approach with a table. I tried appending a within a td but that didn't work. As I recall, SVG text can be tricky. I think by appending div we are not appending SVG text...I think..
Question: How can I add a href property to my Site column in my table?
203
You could simply change .text to .html
and add <a> tags in your data like this:
'Site': '<a href="www.google.com"> google </a>'
Or add conditions in the return statement of your data like this.
if (d.column === 'Site') {
return "<a href="+ d.value +">" + d.value + "</a>"
}
Code below:
var data = [
{'Engine':'Google', 'Founded':'1998', 'Monthly-Visitors':4840295000, 'Site':'www.google.com'},
{'Engine':'Baidu', 'Founded':'2000', 'Monthly-Visitors':1471079000, 'Site':'www.baidu.com'},
{'Engine':'Yahoo', 'Founded':'1995', 'Monthly-Visitors':1038375000, 'Site':'www.yahoo.com'},
{'Engine':'Bing', 'Founded':'2009', 'Monthly-Visitors':203482000, 'Site':'www.bing.com'},
{'Engine':'AOL', 'Founded':'1991', 'Monthly-Visitors': 39961000, 'Site':'www.aolsearch.com'}
];
var columns = ['Engine', 'Founded', 'Monthly-Visitors', 'Site'];
var table = d3.select('body').append('table'),
thead = table.append('thead'),
tbody = table.append('tbody');
thead.append('tr')
.selectAll('th')
.data(columns)
.enter()
.append('th')
.text(function(column) {return column; });
var rows = tbody.selectAll('tr')
.data(data)
.enter()
.append('tr');
var cells = rows.selectAll('td')
.data(function(row) {
return columns.map(function(column) {
return { column: column, value: row[column]};
});
})
.enter()
.append('td')
.html(function(d) {
if (d.column === 'Site') {
return "<a href="+ d.value +">" + d.value + "</a>"
}
return d.value;
});<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="//d3js.org/d3.v3.min.js"></script>
</head>
<body>
answered Aug 26 '26 21:08
You could add the following to the
.style("cursor", "pointer")
.on("click", function(d) { window.open(d.Site, "_blank"); })
just after:
.append('tr')
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
