d3表 - 将特定的超链接添加到值 [英] d3 table - adding specific hyperlink to value

问题描述

我有一个d3生成的表，并添加了一个超链接到第一列中的值（名称）。如何根据每个学生的StudentID，为每个学生制定链接。换句话说，我想让链接为http：//mysite.php?studentid=129508第一个学生，http：//mysite.php?studentid=129562的第二个，而不是http：//mysite.php的每个学生。

I have a d3-generated table and have added a hyperlink to the value (name) in the first column. How can I make the link specific for each student based on their StudentID. In other words I want the link to be http: //mysite.php?studentid=129508 for the first student, http: //mysite.php?studentid=129562 for the second rather than http: //mysite.php for every student.

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

推荐答案

需要两个更改

首先，你需要在你创建数据时存储id：

First you need to store the id ass well when you make teh data:

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

Second link the id in the url

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

工作代码此处

希望这有助于！

这篇关于d3表 - 将特定的超链接添加到值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！