添加到 d3.js 表格行和单元格的超链接答案

【问题标题】：Add hyperlink to d3.js table rows and cells添加到 d3.js 表格行和单元格的超链接
【发布时间】：2013-09-27 03:38:39
【问题描述】：

如何向 d3 生成的表格行和/或单元格添加超链接？

如果我遵循与向矩形、线条和其他对象添加超链接相同的约定，则在导入 xlink 命名空间后，您附加一个 a 标记并设置超链接属性，然后附加您想要的对象，如下所示：

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

但是当你将故事中的角色从一个矩形或行更改为表格行或单元格时，它就不起作用了......

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

【问题讨论】：

这个question 可能会有所帮助。
感谢您的建议。我已经看过了，它有助于从 CSV 文件中的数据呈现表格，但它无助于如何将超链接附加到不同的表格元素。我的表格渲染得很好，但似乎无法将链接附加到其内容。

标签： hyperlink d3.js

【解决方案1】：

啊，好吧，我想你需要使用selection.html，如：

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

我想你可能已经从这里得到了它，但这里是selection.html api doc 的链接。基本上，这允许您附加（在这种情况下）一些 innerHTML 属性。鉴于我认为您正在做的事情，可能值得阅读该页面上的 Subselections 部分。

【讨论】：

太好了，我什至不必附加段落，在行和单元格上工作得很好。谢谢

【解决方案2】：

这是因为矩形和线条是 SVG 元素，而表格是 HTML 元素。（至少我在 SVG 中找不到任何对表格元素的引用。）

对于 HTML，没有 row 元素，也不是有效的 HTML 将表格行包含在锚标记中。

【讨论】：

感谢您的澄清。区别对待 SVG 元素和 HTML 元素是有意义的。我不确定您是否在暗示这一点，但我也尝试在添加表格行后附加锚标记，它不仅通过缩短行来扭曲呈现的表格，链接仍然不起作用。您对如何适当添加超链接有什么建议吗？我知道我犯了一个语法错误。