d3: Titel/Titel an Tabelle anfügen

Question

Ich habe eine Tabelle mit d3.js erstellt. Irgendwie kann ich jedoch keinen Titel oder eine Überschrift an die Tabelle anhängen. Ich habe append .append ("Text") versucht, aber dann würde es unter der Tabelle positioniert werden. Mein spätester Versuch ist .append ("Titel"), der auch nicht funktioniert. Code wird unten zur Verfügung gestellt:

====================================================*/ 

// Get the data 
data.forEach(function(d) { 
    d.Timestamp = parseDate(d.Timestamp); 
    d.Position = +d.Position; 
    d.Agency = +d.Agency; 
}); 

function tabulate(data, columns) { 
    var table = d3.select(".grid_intent").append("table").append("caption").text("Table"); 
    thead = table.append("thead"), 
    tbody = table.append("tbody"); 
    // append the header row 
    thead.append("tr") 
    .selectAll("th") 
    .data(columns) 
    .enter() 
    .append("th") 
    .text(function(column) { 
     return column; 
    }); 
    // create a row for each object in the data 
    var rows = tbody.selectAll("tr").data(data) 
    .enter() 
    .append("tr"); 
    // create a cell in each row for each column 
    var cells = rows.selectAll("td").data(function(row) { 
     return columns.map(function(column) { 
     return { 
      column: column, 
      value: row[column] 
     }; 
     }); 
    }) 
    .enter() 
    .append("td") 
    .attr("style", "font-family: Courier") 
    .attr("colspan", "2") 
    .html(function(d) { 
     return d.value; 
    }); 
    return table; 
} 

// render the table 
var Pos_All_Agen = tabulate(data, ["Agentur", "Position"]) 
//Sort Table Accoring to Position 
Pos_All_Agen.selectAll("tbody tr") 
    .sort(function(a, b) { 
    return d3.ascending(a.Position, b.Position); 
    }); 

Answer 1

Sie sollten eine Arbeits Geige und so konnten wir richtig testen, aber im toten, versuchen Sie dies erstellt:

// Get the data 
data.forEach(function(d) { 
    d.Timestamp = parseDate(d.Timestamp); 
    d.Position = +d.Position; 
    d.Agency = +d.Agency; 
}); 

function tabulate(data, columns) { 
    var table = d3.select(".grid_intent"); 
    var caption = table.append("caption").text("Table"); 
    table.append("table"); 
    thead = table.append("thead"), 
    tbody = table.append("tbody"); 
    // append the header row 
    thead.append("tr") 
    .selectAll("th") 
    .data(columns) 
    .enter() 
    .append("th") 
    .text(function(column) { 
     return column; 
    }); 
    // create a row for each object in the data 
    var rows = tbody.selectAll("tr").data(data) 
    .enter() 
    .append("tr"); 
    // create a cell in each row for each column 
    var cells = rows.selectAll("td").data(function(row) { 
     return columns.map(function(column) { 
     return { 
      column: column, 
      value: row[column] 
     }; 
     }); 
    }) 
    .enter() 
    .append("td") 
    .attr("style", "font-family: Courier") 
    .attr("colspan", "2") 
    .html(function(d) { 
     return d.value; 
    }); 
    return table; 
} 

// render the table 
var Pos_All_Agen = tabulate(data, ["Agentur", "Position"]) 
//Sort Table Accoring to Position 
Pos_All_Agen.selectAll("tbody tr") 
    .sort(function(a, b) { 
    return d3.ascending(a.Position, b.Position); 
    });