使用 javascript 访问表格数据结构

Access tabular data structure with javascript

本文关键字：表格 数据结构 访问表 访问 javascript 使用      更新时间：2023-09-26

使用Javascript和D3js进行数据的可视化，我尝试使用外部csv文件，该文件是从德国政府的数据门户下载的>。按性别和日期划分的德国联邦州人口数据以 csv 形式提供，类似于同样可用的 xlsx 文件的表格结构。有一个页眉和一个页脚，我不感兴趣（第 1-5 行和第 28-32 行）。实际数据有一个层次结构，第一行是德国的不同州，第二行是性别，然后是几行，其中包含不同日期的人口数量（第一列）。最后，我希望有一个对象数组，例如

[{name: "Bavaria", male:10000, female: 10000, overall: 20000},{name: ...}]

到目前为止，我正在使用以下代码：

d3.csv("externaldata/12411-0021.csv", function(data){
    states = data;
});

这将返回一个对象数组，而每个对象似乎都与文档中的行相关。我的想法是从这些对象中提取信息，但我不知道如何访问/解析单行。

如果你的列名是 name 、 male 、 female 和 overall ，那么 states var 应该包含你根据你的示例想要的内容。

因此，如果 var states 是一个对象数组（或关联数组数组），则可以像这样访问单行：

var firstRow = states[0];
// > {name: "Bavaria", male:10000, female: 10000, overall: 20000}

您可以像这样访问该行的列：

var firstRowName = states[0]["name"];
// > "Bavaria"

或

firstRowName = states[0].name;
// > "Bavaria"
您需要

将数据"绑定"到 SVG 中的元素。一旦绑定了顶级元素和数据（即.csv到表），您还需要关联较低级别的元素（例如，您的案例中的对象和行）。

您还需要决定如何在幕后构建您的表格。D3 将其所有元素放在 SVG 对象中，而 SVG 不喜欢表。因此，您可能需要添加一个名为表的组，称为行的组，然后添加单元格的矩形和文本。

因此，首先，您需要将整个数据对象链接到表。然后，您需要告诉 d3，该数据对象中的每个项目对应于表中的一行。

var csv = d3.csv("path/to/file.csv")
    .row(function(d) { return {key: d.key, value: +d.value}; })
    .get(function(error, rows) { console.log(rows); });

https://github.com/mbostock/d3/wiki/CSV

然后，您的代码应如下所示（未选中！

var svg = d3.select("body").append("svg");
var table = svg.selectAll("g.table").data(csv).enter().append("g").attr("class","table");
var rows = table.selectAll("g.row").data(function(d){return d;}).enter().append("g").attr("class","row");
rows.selectAll("rect.cell").data(function(d){return d;}).enter().append("rect").attr("class","cell").attr("x","").attr("y","").attr("width","").attr("height","");
rows.selectAll("text.cell").data(function(d){return d;}).enter().append("text").attr("class","cell").attr("x","").attr("y","").attr("text-anchor","").text(function(d){ return d; });

此特定代码是否有效将取决于您的确切数据结构。

相关文章：