在表 D3 中的导入数据中放置一个链接

Question

我正在通过 d3.js 将一些数据从 csv 导入到表中。在这一步中我想要的是当用户点击其中一个单元格时放置一个指向其他页面的链接。

我有一个带有 Transformer ID 列的表，如果用户单击转换器的 ID，他们会被重定向到其页面（已在 html 中创建）。

我看过一些 .attr 的示例，但我几周前才开始学习 d3.js，此时我无法自己编写代码。

你能帮帮我吗？

$(document).ready(function()
{
    d3.text("data/table-assets.csv", function(data) 
    {
        var parsedCSV = d3.csv.parseRows(data);
        var container = d3.select(".table-striped")
            .append("tbody")
            .selectAll("tr")
            .data(parsedCSV).enter()
            .append("tr")

            .selectAll("td")
            .data(function(d) { return d; }).enter()
            .append("td")
            .text(function(d) { return d; }).style('background-color',function(d){
if(d>90){
return "#4CC417";
}
                else if(d<90 && d>80){
                return "#B2C248";
                }
                else if(d<80) {
                    return "#DC381F";
                }}).style('color', function(d){
                if(d>0){
                    return "white";
                }
                });
     });        
});

Answer 1

您可以使用 .append('a').attr('href',function(d){return ...}) 创建的链接

稍微结构化代码是一个好习惯：

var tr = table.selectAll("tr").data(...)
var tr_new = tr.enter().append("tr")
tr_new...//set styles etc.
var td = tr_new.selectAll("td").data(...)
var td_new = td.enter().append("td")
td_new...//set styles, append contents etc.