codice:
/* inserimento titolo h2 e paragrafo */
d3.select("body")
.append("h2")
.text("Palinsesto programmi 2021")
d3.select("body")
.append("p")
.text("Qui trovate la nostra programmazione settimanale: cliccate sul nome del proogramma per aprire la pagina relativa")
/* inserimento dell'intestazion della tabella con le relative etichette */
d3.select("body")
.append("table")
.append("thead")
.append("tr")
.selectAll("th")
.data(["dalle", "alle", "LUNEDI", "dalle", "alle", "MARTEDI", "dalle", "alle","MERCOLEDI",
"dalle", "alle", "GIOVEDI", "dalle", "alle", "VENERDI", "dalle", "alle", "SABATO",
"dalle", "alle", "DOMENICA"
])
.enter()
.append("th")
.text(function (d) { return d });
d3.select("table")
.append("tbody")
.enter();
/*divisione di ogni dato array in 3 parti ProgrammaNome, ProgrammaUrl e datoClasse */
d3.csv("Palinsesto.csv", function (datiCaricati) {
console.log(datiCaricati);
var d = datiCaricati;
d3.select("tbody")
.append("tr")
.selectAll("td")
.data([d.dalle, d.alle, d.LUNEDI, d.dalle, d.alle, d.MARTEDI, d.dalle, d.alle, d.MERCOLEDI,
d.dalle, d.alle, d.GIOVEDI, d.dalle, d.alle, d.VENERDI, d.dalle, d.alle, d.SABATO,
d.dalle, d.alle, d.DOMENICA])
.enter()
.append("td")
.attr("class",function(d){
const [Pippo, Pluto, Topolino] = d.split("|");
return Topolino;
})
.html(function (cella) {
const [ProgrammaNome, ProgrammaUrl, classeCella] = cella.split("|");
/* se la cella ha il valore dell'url, inserisco un link */
if (ProgrammaUrl) {
return "<a href='" + ProgrammaUrl + "' target='blank' \">" + ProgrammaNome + "</a>"
}
/* altrimenti mostro un testo normale */
/*Se non ci fosse le colonne "dalle" e "alle" non verrebbero visualizzate */
else {
return ProgrammaNome
}
}
)
});
Grazie