Question

假设有一个名为 datatable.tsv 的给定制表符分隔值（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值为正，请设置class＆＃34; add＆＃34 ;;否则设置课程＆＃34;减去＆＃34;。

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

如何将超链接添加到第一列？
是否有其他方法可以改进添加类的代码＆＃34;对＆＃34;，＆＃34;添加＆＃34;和＆＃34;减去＆＃34;？

代码：

<!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字段和URL字段中的href读取不应显示在表中。

Answer 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 。：）

Answer 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。

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

2 个答案: