d3：表にキャプション/タイトルを追加

Question

d3.jsを使用してテーブルを生成しました。しかし、どういうわけか私はテーブルにタイトルやキャプションを付けることができません。私はアペンド.append（「テキスト 『）を試してみましたが、それはテーブルの下に位置することになる私の最新の試みが.appendである。また、動作しません（』キャプション '）、 コードを以下に提供されています。

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

// 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

あなたは私たちが適切にテストすることができ、作業フィドルを作成したが、ブラインドでは、これを試している必要があります！申し訳ありませんが、私はフィドルを作成します次回はまた、残念ながら、それは動作しませんでした

// 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); 
    });