Pagina 2 di 2 primaprima 1 2
Visualizzazione dei risultati da 11 a 16 su 16
  1. #11
    Utente di HTML.it
    Registrato dal
    May 2021
    Messaggi
    12
    p.s.

    ah mi sono accorto che non ho scritto nulla del file origine dei dati: il file .csv
    è strutturato in modo che ogni singolo dato sia:

    NomeProgramma|UrlProgramma|datoClasseN

    dato ClasseN mi serve per assegnare a ciascun td una clase diversa in modo da potergli assegnare un diverso sfondo.

    codice:
    dalle,alle,LUNEDI,MARTEDI,MERCOLEDI,GIOVEDI,VENERDI,SABATO,DOMENICA
    08:00,09:00,programma01|http://www.google.com|datoClasse01,programma01|http://www.google.com|datoClasse01,programma01|http://www.google.com|datoClasse01,programma01|http://www.google.com|datoClasse01,programma01|http://www.google.com|datoClasse01,programma01|http://www.google.com|datoClasse01,programma01|http://www.google.com|datoClasse01
    09:00,10:00,programma02|http://www.amazon.it|datoClasse02,programma02|http://www.amazon.it|datoClasse02,programma02|http://www.amazon.it|datoClasse02,programma02|http://www.amazon.it|datoClasse02,programma02|http://www.amazon.it|datoClasse02,programma02|http://www.amazon.it|datoClasse02,programma02|http://www.amazon.it|datoClasse02
    ...

  2. #12
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    4,922
    Benissimo, ho già dato uno sguardo e penso si possa apportare tranquillamente la modifica.

    Purtroppo, causa impegni lavorativi, non ho molto tempo durante la settimana, inoltre non ho mai usato D3 ma in linea di massima ho dato uno sguardo alla documentazione e ho visto già come poter intervenire.

    Questi giorni lo esamino meglio e ti aggiorno prossimamente.

    Nel frattempo buon proseguimento con lo studio.
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 20% tra i post del forum; il 15% sul web. Ti resta... humm spè
    Le cattive domande sono quelle che non meritano risposta, le buone domande sono quelle che non hanno risposta
    L'Itailano non e nu'opnioine. E' improntate uslaro correattemtne sul froum. Garize!

    "Mi son documentato"

  3. #13
    Utente di HTML.it
    Registrato dal
    May 2021
    Messaggi
    12
    Quote Originariamente inviata da KillerWorm Visualizza il messaggio
    Benissimo, ho già dato uno sguardo e penso si possa apportare tranquillamente la modifica.

    Purtroppo, causa impegni lavorativi, non ho molto tempo durante la settimana, inoltre non ho mai usato D3 ma in linea di massima ho dato uno sguardo alla documentazione e ho visto già come poter intervenire.

    Questi giorni lo esamino meglio e ti aggiorno prossimamente.

    Nel frattempo buon proseguimento con lo studio.

    Ringrazio per la gentilezza innanzitutto.
    Poi magari vorrei chiederti alcune cose di javascript...mi pare tu sia più esperto di me sicuramente :-)

  4. #14
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    4,922
    Ciao, sto giocando un po' con D3 per prendere confidenza prima di proporti qualche possibile soluzione

    Poi magari vorrei chiederti alcune cose di javascript...mi pare tu sia più esperto di me sicuramente :-)
    In questo caso può essere più opportuno rivolgere la tua richiesta nella relativa sezione JavaScript; se posso, risponderò volentieri; ci sono comunque vari esperti che frequentano questo forum, potrai senz'altro ricevere adeguato aiuto
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 20% tra i post del forum; il 15% sul web. Ti resta... humm spè
    Le cattive domande sono quelle che non meritano risposta, le buone domande sono quelle che non hanno risposta
    L'Itailano non e nu'opnioine. E' improntate uslaro correattemtne sul froum. Garize!

    "Mi son documentato"

  5. #15
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    4,922
    Bene, partendo dallo script che hai postato, l'ho rielaborato in modo da ottenere la struttura tabellare che serviva.
    Ho rivisto e semplificato anche un po' la logica da te usata per splittare i dati dei programmi.
    Qui un esempio di codice completo:
    codice HTML:
    <!DOCTYPE HTML>
    <html lang="it">
      <head>
        <title>Esempio</title>
        <style>
          body {
            text-align: center;
            font-family: sans-serif;
          }
    
          .rtable {
            display: inline-table;
            border-collapse: collapse;
          }
    
          .rtable th,
          .rtable td {
            padding: 8px 12px;
            border: 1px solid #000;
          }
    
          .rtable th {
            color: #fad430;
            background: #0e2071;
          }
    
          .rtable td:nth-child(-n+2) {
            color: #fbe16b;
            background: #51649c;
          }
    
          .rtable th:nth-child(3) {
            text-transform: uppercase;
          }
    
          @media only screen and (min-width: 600px) {
            .rtable {
              display: flex;
              flex-wrap: wrap;
              justify-content: center;
            }
    
            .rtable tbody {
              margin-bottom: 2px;
              box-shadow: 2px 1px 3px -1px #000;
            }
    
            .rtable th:last-child,
            .rtable td:last-child {
              border-right: 0;
            }
          }
          
          /* --- datoClasse --- */
          
          .datoClasse01 {background: #8bfbc8}
          .datoClasse02 {background: #7bdf94}
          .datoClasse03 {background: #91f68c}
          .datoClasse04 {background: #d4fb82}
          .datoClasse05 {background: #c2fb8c}
          .datoClasse06 {background: #ccdf7c}
          .datoClasse07 {background: #f3f194}
          .datoClasse08 {background: #dcce7a}
          .datoClasse09 {background: #f7dd89}
          .datoClasse10 {background: #f6d675}
          .datoClasse11 {background: #dab167}
          .datoClasse12 {background: #f0b97e}
          .datoClasse13 {background: #d89065}
          .datoClasse14 {background: #f38e71}
          
        </style>
      </head>
      <body>
    
        <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/6.7.0/d3.min.js"></script>
        <script>
        
    // Inserisco 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");
    
    // Leggo i dati dal CSV
    d3.csv("Palinsesto.csv").then(function(dati){
        var campi = dati.columns;
        
    // Creo la tabella e i 7 tbody, uno per ogni giorno della settimana
        d3.select("body")
            .append("table")
            .attr("id", "tab_palinsesto")
            .classed("rtable", true)
            .selectAll("tbody")
            .data(Array(7))
            .enter()
            .append("tbody")
        ;
        
    // Ciclo per i giorni
        for (let giorno=0; giorno<7; giorno++){
        
    // Creo le intestazioni per ogni tbody
            let tbody = d3.select("#tab_palinsesto>tbody:nth-child("+(giorno+1)+")");
            
            tbody
                .append("tr")
                .selectAll("th")
                .data([campi[0], campi[1], campi[giorno+2]])
                .enter()
                .append("th")
                .text(d=>d)
            ;
            
    // Ciclo per le righe
            for (let riga=0; riga<dati.length; riga++){
                let dalle           = dati[riga][campi[0]]
                  , alle            = dati[riga][campi[0]]
                  , programma       = dati[riga][campi[giorno+2]].split("|")
                  
    // Dati aggiuntivi del programma
                  , programmaNome   = programma[0]
                  , programmaUrl    = programma[1]
                  , programmaLink   = "<a href='" + programmaUrl + "' target='blank' \">" + programmaNome + "</a>"
                  , datoClasse      = programma[2]
                ;
                
    // Aggiungo le righe con i dati
                tbody
                    .append("tr")
                    .selectAll("td")
                    .data([dalle, alle, programmaLink])
                    .enter()
                    .append("td")
                    .classed(datoClasse, true)
                    .html(d=>d)
                ;
            }
        }
    });
    
        </script>
      </body>
    </html>
    Spero non mi sia sfuggito nulla.
    Provalo e fai sapere.

    Se poi hai bisogno di chiarimenti (più che altro per la parte riguardante il CSS), chiedi pure qui; per il resto ho visto che hai già chiesto in JavaScript.




    PS: Tengo a precisare che ho risposto sempre su questa discussione anche per ciò che riguardava esplicitamente la parte JavaScript perché ritengo possa comunque essere utile anche ad altri eventuali utenti, oltre che a te, avere un esempio concreto in riferimento alla soluzione CSS fornita per questo particolare caso, e quindi un possibile modo per poter adeguare l'elaborato esistente così da ottenere il risultato voluto.
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 20% tra i post del forum; il 15% sul web. Ti resta... humm spè
    Le cattive domande sono quelle che non meritano risposta, le buone domande sono quelle che non hanno risposta
    L'Itailano non e nu'opnioine. E' improntate uslaro correattemtne sul froum. Garize!

    "Mi son documentato"

  6. #16
    Utente di HTML.it
    Registrato dal
    May 2021
    Messaggi
    12
    Ti ringrazio... me lo studio per bene e lo provo :-)

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2021 vBulletin Solutions, Inc. All rights reserved.