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

时间:2013-09-22 00:06:54

标签: hyperlink d3.js

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

如果我遵循与向rects,lines和其他对象添加超链接相同的约定,则在导入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")
    ...

2 个答案:

答案 0 :(得分:3)

啊,好吧那么我认为你需要使用的是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部分。

答案 1 :(得分:0)

那是因为rects和lines是SVG元素,而table是HTML元素。 (至少我在SVG中找不到对表元素的任何引用。)

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