Question

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

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

Answer 1

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

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

Answer 2

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

默认情况下，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找到。

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

2 个答案: