Question

我想添加一个链接到我使用d3从表格数据创建的表。快速浏览一下我的片段：

＆＃13;

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

＆＃13;

    
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="//d3js.org/d3.v3.min.js"></script>
</head>
<body>

＆＃13;

我创建了表格，但我不确定如何使包含网站的行成为可点击的链接。过去我用过：

d3.select('.links').append('div')
    .append('a')
    .attr('href', 'http://www.google.com')
    .append('text')
    .html('Click here to go to a search engine.');

但是，我无法弄清楚如何在桌子上使用这种方法。我尝试在a中附加td，但这不起作用。我记得，SVG文本可能很棘手。我认为通过附加div我们不附加SVG文本... 我认为 ..

问题：如何在表格中的href列中添加Site属性？

Answer 1

您只需将.text更改为.html

即可

并在您的数据中添加<a>标记，如下所示：

'Site': '<a href="www.google.com"> google </a>'

或者像这样在数据的return语句中添加条件。

if (d.column === 'Site') {
  return "<a href="+ d.value +">" + d.value + "</a>"
}

以下代码：

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>

Answer 2

您可以将以下内容添加到

.style("cursor", "pointer")
.on("click", function(d) { window.open(d.Site, "_blank"); })

紧随其后：

.append('tr')

将链接添加到D3生成的表

2 个答案: