Javascript d3：将标题/标题附加到表中

我已经使用d3.js生成了一个表。然而，不知何故，我无法将标题或标题附加到表中。我尝试了append.append（“text”），但是它会被放置在表的下面。我最近的尝试是.append（“caption”），它也不起作用。 代码如下：

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

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

---

您应该创建一个工作小提琴，以便我们能够正确测试，但在盲人中，请尝试以下方法：

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

---

您应该创建一个工作小提琴，以便我们能够正确测试，但在盲人中，请尝试以下方法：

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

---

很抱歉，下次我将创建一个提琴！不幸的是，它没有工作：/Please create a fiddle。您的代码明确要求存在特定元素（“.grid\u intent”），您的问题可能来自另一个问题。除非您可以复制您的问题，否则我们无能为力。不过，我相信我的代码可以工作，在表前创建一个文本元素。很抱歉，下次我将创建一个提琴！不幸的是，它不起作用：/请创建一个提琴。您的代码显然需要特定的如果存在fic元素（'.grid_intent'），则您的问题可能来自不同的问题。除非您可以复制您的问题，否则我们无能为力。不过，我相信我的代码确实有效，在表前创建一个包含文本的元素。