CSV 文件到堆栈布局 d3.js 中的内置数组中答案

【问题标题】：CSV file into built in array in stack layout d3.jsCSV 文件到堆栈布局 d3.js 中的内置数组中
【发布时间】：2016-04-20 05:13:32
【问题描述】：

我正在尝试使用 d3.js 构建堆栈条形图。找到了很棒的教程。但是在作者使用的示例中，有一个 csv 文件。我想代替它使用内置的数据数组，但我绝对不明白在使用嵌套进行堆栈布局时代码将如何变化。这是一个来源http://curran.github.io/screencasts/splittingCharts/examples/viewer/#/17。如果有人帮助我，我将不胜感激。我想要这样的东西：

var arrayOfData ...;
...
function render(data)
{
...
}
...
render(arrayOfData);

【问题讨论】：

标签： javascript arrays json csv d3.js

【解决方案1】：

你可以看到它：https://jsfiddle.net/uu4p99bf/

function render(data){
    var nested = d3.nest(data)//change in here
    //same code with sample
}

【讨论】：

【解决方案2】：

你在正确的轨道上，你基本上可以用render(data)替换d3.csv('file.csv',render)；你只需要正确地格式化你的数据。

默认情况下d3.csv 将数据加载为对象数组，其属性对应于每个列标题。因此，在您的示例中，csv 数据作为具有.country、.religion 和.population 属性（例如{country: "USA", religion: "Other Religions", population: 1900000}）的对象数组加载。如果您将数据转换为该格式，它应该可以工作。

或者，您可以更改代码以反映您当前使用的数据格式。在这些情况下，您必须用您想要的替换 d[xColumn]、d[yColumn] 和 d[layerColumn] 的实例。例如，如果您使用的是数组数组，它们将分别变为 d[0]、d[2] 和 d[1]。

您可能还想查看您正在使用的示例的截屏视频，其中详细介绍了它的构建方式。您可以通过https://github.com/curran/screencasts/tree/gh-pages/splittingCharts找到。

【讨论】：