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

时间:2016-02-08 16:17:04

标签: javascript html d3.js

我通过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";
                }
                });
     });        
});

1 个答案:

答案 0 :(得分:0)

您可以使用.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.