Marcelo Pires February 2016

Place a link in imported data in table D3

I'm importing some data from a csv to a table through d3.js. What I want in this step is to place a link to other pages when the user clicks in one of the cells.

I have a table with a Transformer ID column and if the user clicks the ID of the transformer, they get redirected to its page (which already is create in html).

I have seen a few examples with .attr but I just started learning d3.js a few weeks ago and, at this moment, I can't write code by myself.

Can you help me please?

$(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";
                }
                });
     });        
});

Answers


Pavel Gatnar February 2016

A link you can create using .append('a').attr('href',function(d){return ...})

It is a good practise to structure the code a little bit:

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.

Post Status

Asked in February 2016
Viewed 1,016 times
Voted 14
Answered 1 times

Search




Leave an answer