javascript - 在NVD3中读取来自csv文件的数据时,ScatterChart

  显示原文与译文双语对照的内容

我试图从csv文件中读取数据并想要将这个数据与NVD3的scatterChart形象化。

如果我将JSfiddle链接到或者类似的东西,但是我不知道如何在这些在线的JavaScript ide中包含csv文件。 有可能吗?

csv文件具有以下格式:


 country,y,x
 Algeria,91.8,15.7
 Bahrain,98.2,49.3
 Jordan,99.1,55.0
 Kuwait,98.6,57.4
 Lebanon,98.7,58.6

我对读取csv文件的代码最好的猜测是:


var scatterdata = [ 
 {
 key :"Group1",
 values : []//{x:"",y:""}
 }
];

d3.csv("literacyScatterCountrynames.csv", function (error, csv) {
 if (error) return console.log("there was an error loading the csv:" + error);
 console.log("there are" + csv.length +" elements in my csv set");

scatterdata[0].values["x"] = csv.map(function(d){return [+d["x"] ]; });
scatterdata[0].values["y"] = csv.map(function(d){return [+d["y"] ]; });

我在DOM中看到我的数据,但它看上去是不错的,但是图表显示的是'没有可用数据。'。

我们也不在 StockOverflow,也不在GitHub上的NVD3文档中,也不能在GitHub上的NVD3图表上找到更多信息。

时间: 作者:

将csv转换为JSON会工作,但不是必需的。 你已经在out中获得了数据格式化方法。

你似乎希望一个包含三个数组的对象,一个用于表中的每一列。 D3方法创建( 而NVD3的方法)的array,每个行一个。

当你做


scatterdata[0].values["y"] = csv.map(function(d){return [+d["y"] ]; });

you array 对象对象的命名属性,但是实际上并没有使用 array 方法添加内容,因此 array的长度仍然是零,并将它的视为空的array --,并给出"无数据"警告。

你可以使用单个映射函数对数据 array 进行数字格式化,而不是使用映射函数,然后直接将结果设置为你的值格式。

就像这样:


var scatterdata = [ 
 {
 key :"Group1",
 values : []//{x:"",y:""}
 }
];

d3.csv("literacyScatterCountrynames.csv", function (error, csv) {
 if (error) return console.log("there was an error loading the csv:" + error);
 console.log("there are" + csv.length +" elements in my csv set");

 scatterdata[0].values = csv.map(function(d){ 
 d.x = +d.x; 
 d.y = +d.y; 
 return d; 
 });

 console.log("there are" + scatterdata[0].values.length +" elements in my data");
//this should now match the previous log statement

/* draw your graph using scatterdata */
}

映射函数接受csv文件中的所有元素,每个元素代表csv文件的一行,并将它们传递给函数,然后将函数从函数中取出并创建一个新的array 。 函数用数字版本替换传入对象的x 和y 属性的字符串版本,然后返回正确格式化的对象。 格式化对象的结果 array 直接成为 array 值。

编辑

方法创建一个包含数据点的单个数据序列所有。 就像评论中提到的,如果希望类别 NAME 在工具提示中显示,则会出现问题。工具提示自动将系列 NAME 显示为工具提示值。 也就是说,在 上面 代码中,每个点都有工具提示"group1"。 没有什么信息。

要格式化数据以获取有用的工具提示,需要每个点作为自己的数据序列。 使这种情况发生的最简单的方法是使用NVD3期望的表单输出,并使用 d3.nest,。 每个"嵌套"子数组中只有一个数据点,但对于NVD3来说这不是一个问题。

将每个点创建为单独的序列的代码为:


var scatterdata;
//Don't need to initialize nested array, d3.nest will create it.

d3.csv("literacyScatterCountrynames.csv", function (error, csv) {
 if (error) return console.log("there was an error loading the csv:" + error);
 console.log("there are" + csv.length +" elements in my csv set");

 var nestFunction = d3.nest().key(function(d){return d.country;});
//create the function that will nest data by country name

 scatterdata = nestFunction.entries(

 csv.map(function(d){ 
 d.x = +d.x; 
 d.y = +d.y; 
 return d; 
 })

 );//pass the formatted data array into the nest function

 console.log("there are" + scatterdata.length +" elements in my data");
//this should still match the previous log statement
//but each element in scatterdatta will be a nested object containing
//one data point

/* draw your graph using scatterdata */
}

你可以将数据放入变量,Mike在这里描述了 :


name value
Locke 4
Reyes 8
Ford 15
Jarrah 16
Shephard 23
Kwon 42

以这种方式表示:


var data = [
 {name:"Locke", value: 4},
 {name:"Reyes", value: 8},
 {name:"Ford", value: 15},
 {name:"Jarrah", value: 16},
 {name:"Shephard", value: 23},
 {name:"Kwon", value: 42}
];

...