使用数据集将超链接添加到 d3.js 表格单元格答案

【问题标题】：Add hyperlink to d3.js table cells with dataset使用数据集将超链接添加到 d3.js 表格单元格
【发布时间】：2016-04-20 17:02:09
【问题描述】：

假设有一个给定的制表符分隔值 (TSV) 文件，名为 datatable.tsv：

Title   URL DataChange
A   http://localhost/A.html 1
B   http://localhost/B.html -2
C   http://localhost/C.html 0
D   http://localhost/D.html 12
E   http://localhost/E.html -9

我需要用D3.js生成一个数据表并实现以下需求：

第一列显示一个超链接，标题为文本，URL 为 href。
第二列显示 DataChange 值。
数字值应右对齐。
如果 DataChange 值为正，则设置类“add”；否则设置类“减号”。

对于我的代码如下，我的问题是：

如何将超链接添加到第一列？
还有其他方法可以改进添加“right”、“add”和“minus”类的代码吗？

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Data Table</title>
    <style>
        table { border-collapse: collapse; color: #333; background-color: #F7F6F3; }
        table thead { font-weight: bold; background-color: #CCC; cursor: default; }
        table tbody tr:hover { background-color: #FFC; }
        td { border: solid 1px #CCC; padding: 0 1ex; }
        .even { color: #284775; background-color: White; }
        .left { text-align: left; }
        .right { text-align: right; }
        .add { color: green; }
        .minus { color: red; }
    </style>
</head>
<body>
    <div id="table"></div>
    <script src="d3.min.js"></script>
    <script>
        var table = d3.select("#table").append("table"),
            thead = table.append("thead"),
            tbody = table.append("tbody");
        thead.append("th").text("Title");
        thead.append("th").text("Data Change");

        d3.tsv("datatable.tsv", function(error, data) {
            if (error) throw error;
            var tr = tbody.selectAll("tr")
                .data(data)
                .enter().append("tr")
                .classed("even", function(d, i) { return i % 2 == 1; });
            var td = tr.selectAll("td")
                .data(function(d) { return [d.Title, d3.format("+")(+d.DataChange)]; })
                .enter().append("td")
                .text(function(d) { return d; })
                .classed("right", function(d, i) { return i == 1; })
                .classed("add", function(d, i) { return i == 1 && d.charAt(0) == "+"; })
                .classed("minus", function(d, i) { return i == 1 && d.charAt(0) == "-"; });
        });
    </script>
</body>
</html>

我发现another similar question 使用 selection.html 给出了解决方案。但在我的情况下，从 URL 字段读取的 href 和 URL 字段不应显示在表格中。

【问题讨论】：

标签： d3.js hyperlink

【解决方案1】：

我找到了这样的解决方案：

var td = tr.selectAll("td")
    .data(function(d) {
        return [
            '<a href="'+d.URL+'">'+htmlencode(d.Title)+'</a>',
            d3.format("+")(+d.DataChange)
        ];
    })
    .enter().append("td")
    .html(function(d) { return d; })
    .attr("class", function(d, i) {
        return i == 1 ? "right " + (d.charAt(0) == "+" ? "add" : "minus") : null;
    });

当我问这个问题时，我对 selection.data 的理解不够清楚。 :)

【讨论】：

【解决方案2】：

您可以尝试使用 .each() 函数为每一行添加适当的单元格，如下所示：

  var tr = tbody.selectAll("tr")
      .data(data)
    .enter().append("tr")
      .classed("even", function(d, i) { return i % 2 == 1; });
  tr.each(function(d) {
    var self = d3.select(this);
    self
      .append("td")
      .append("a")
        .attr("href", d.URL)
        .text(d.Title);
    self.append("td")
        .html(d["Data Change"]);
  });

这是你可以玩的working block。

【讨论】：