d3 表 - 将特定超链接添加到值答案

【问题标题】：d3 table - adding specific hyperlink to valued3 表 - 将特定超链接添加到值
【发布时间】：2018-04-05 22:00:03
【问题描述】：

我有一个 d3 生成的表，并在第一列中添加了指向值（名称）的超链接。如何根据每个学生的 StudentID 为每个学生创建链接。换句话说，我希望第一个学生的链接是 http://mysite.php?studentid=129508，第二个学生的链接是 http://mysite.php?studentid=129562 而不是每个学生的 http://mysite.php学生。

var data = [{"StudentID":"129508","FirstName":"Madison", "Math":"69.6","English":"64.1","History":"63.2"},          {"StudentID":"129562","FirstName":"Virginia","Math":"52.7","English":"64.1","History":"82.3"},          {"StudentID":"129770","FirstName":"Lucinda","Math":"93.4","English":"87.9","History":"84.6"},           {"StudentID":"129427","FirstName":"Ella","Math":"62.3","English":"64.1","History":"60.7"},          {"StudentID":"129203","FirstName":"Nicholas","Math":"74.9","English":"66.2","History":"73.2"}];
function tabulate(data, columns) {
    var table = d3.select("body").append("table")
        .attr("style", "margin-left: 100px")
        .style("border-collapse", "collapse")
        .style("border", "2px black solid"), 
    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")
    .attr("style", "font-family: Courier") 
    .html(function(d, i) {  
                if (i === 0) { return "<a href=\"http://mysite.php\">" + d.value + "</a>";
                } else {return d.value;
                }
        });
return table;
}
var resultsTable = tabulate(data, ["FirstName", "Math", "English", "History"]);

【问题讨论】：

标签： javascript d3.js

【解决方案1】：

需要进行两项更改。

首先，您需要在制作数据时存储 id：

var cells = rows.selectAll("td")
        .data(function (row) {
        return columns.map(function (column) {
            console.log(row)
            return {
                column: column,
                value: row[column],
                id: row.StudentID //storing the id
            };
        });
    })

第二次链接url中的id

if (i === 0) {
            console.log(d)
            return "<a href=\"http://mysite.php?studentid="+d.id+"\">" + d.value + "</a>";
        } else {
            return d.value;
        }
    });

工作代码here.

【讨论】：