Question

使用Javascript和D3js进行数据可视化，我尝试使用外部csv文件，我从德国政府的数据门户下载。 - ＆GT; Population of German Federal States by gender and date 数据以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;
});

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

Answer 1

如果您的列名称为name，male，female和overall，那么states var应该包含您希望它的基本名称在你的例子上。

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

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

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

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

或

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

Answer 2

你需要＆＃34;绑定＆＃34;数据到SVG中的元素。一旦你绑定了顶级元素和数据（即csv到表），你还需要关联较低级别的元素（例如你的情况下的对象和行）。

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

因此，首先，您需要将整个数据对象链接到表。然后你需要告诉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; });

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

使用javascript

2 个答案: