d3 添加 html 链接到 table 中的一列数据
d3 adding html links to a column of data in a table
我是 d3 和 Javascript 的新手,我正在尝试向指定数据列中的每个值添加一个 <a>
元素(具有 href 属性)。目前我正在使用以下代码生成 table:
function tabulate(data, columns) {
var table = d3.select("#data_table").append("table"),
thead = table.append("thead"),
tbody = table.append("tbody");
// append the header row
thead.append("tr")
.selectAll("th")
.data(columns)
.enter()
.append("th")
.text(function(column) {
return column;
})
.on('click', function (d) {
rows.sort(function (a, b) {
if (isNaN(a[d])) {
return d3.ascending(a[d], b[d]);
}
else {
return b[d] - a[d];
}
});
});
// create a row for each object in the data
var rows = tbody.selectAll("tr")
.data(data)
.enter()
.append("tr");
// create a cell in each row for each column
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) {
return (d.value);
});
return table;
}
//render the data
tabulate(data, ["NAME", "1", "2", "3", "4"]);
我想根据单元格中的值将 "NAME" 列中的每个值都设为指向网站的超链接。例如:如果名称列中有一个值是 "my_value",它将是指向“http://test/my_value”的超链接。感谢您的帮助!
你必须像这样过滤数据后附加一个 link :
cells.filter(function(d, i) { return i === 0})
.append("a")
.attr("href", function(d) {
return "http://test/" + d.value;
})
.html(function(d) {
return (d.value);
});
见https://jsfiddle.net/o64e570x/1/
也可以使用
的列名进行过滤
cells.filter(function(d, i) { return d.column === "NAME"})
我是 d3 和 Javascript 的新手,我正在尝试向指定数据列中的每个值添加一个 <a>
元素(具有 href 属性)。目前我正在使用以下代码生成 table:
function tabulate(data, columns) {
var table = d3.select("#data_table").append("table"),
thead = table.append("thead"),
tbody = table.append("tbody");
// append the header row
thead.append("tr")
.selectAll("th")
.data(columns)
.enter()
.append("th")
.text(function(column) {
return column;
})
.on('click', function (d) {
rows.sort(function (a, b) {
if (isNaN(a[d])) {
return d3.ascending(a[d], b[d]);
}
else {
return b[d] - a[d];
}
});
});
// create a row for each object in the data
var rows = tbody.selectAll("tr")
.data(data)
.enter()
.append("tr");
// create a cell in each row for each column
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) {
return (d.value);
});
return table;
}
//render the data
tabulate(data, ["NAME", "1", "2", "3", "4"]);
我想根据单元格中的值将 "NAME" 列中的每个值都设为指向网站的超链接。例如:如果名称列中有一个值是 "my_value",它将是指向“http://test/my_value”的超链接。感谢您的帮助!
你必须像这样过滤数据后附加一个 link :
cells.filter(function(d, i) { return i === 0})
.append("a")
.attr("href", function(d) {
return "http://test/" + d.value;
})
.html(function(d) {
return (d.value);
});
见https://jsfiddle.net/o64e570x/1/
也可以使用
的列名进行过滤 cells.filter(function(d, i) { return d.column === "NAME"})