ScatterChart in NVD3 - Reading来自csv文件的数据
我正在尝试读取csv文件中的数据，并希望用scatterChart在NVD3中可视化这些数据。
我本可以链接到一个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的NVD3文档中，还是在cmaurer关于Github的NVD3图表的有用网站上，我都找不到更多关于如何做到这一点的信息。
回答 2
Stack Overflow用户
发布于 2014-01-15 23:12:49
将csv转换为JSON是可行的，但没有必要。你刚刚有你的数据格式化方法内-外。
您似乎在期待一个包含三个数组的对象，表中的每个列都有一个数组。D3方法创建( NVD3方法期望)一个对象数组，每一行一个。
当你做的时候
scatterdata[0].values["y"] = csv.map(function(d){return [+d["y"] ]; });您正在创建值数组对象的命名属性(所有Javascript数组也都是对象)，但实际上没有使用数组方法添加内容，因此该数组的长度仍然为零，NVD3将其视为空数组--并给出“无数据”警告。
可以使用单个映射函数对数据数组进行数字格式化，然后直接将结果设置为值数组，而不是像使用映射函数那样使用映射函数。
就像这样：
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文件中的一行--并将它们传递给函数，然后从函数中获取返回的值，并从它们中创建一个新的数组。该函数将传入对象的x和y属性的字符串版本替换为其数值版本，然后返回正确格式化的对象。格式化对象的结果数组直接成为值数组。
编辑
上面的方法创建一个包含所有数据点的单一数据序列。正如注释中所讨论的，如果希望在工具提示中显示类别名称-- NVD3工具提示自动将系列名称显示为工具提示值，则可能会出现问题。在上面的代码中，这意味着每个点都有工具提示"Group1“。信息不多。
要格式化数据以获得有用的工具提示，您需要将每个点作为自己的数据系列。实现这一目的的最简单方法是使用NVD3，并使输出以NVD3所期望的形式出现。每个“嵌套”子数组中只有一个数据点，但这对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 */
}Stack Overflow用户
发布于 2014-01-15 22:40:06
您可以将数据放入变量中，就像迈克描述的这里一样
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}
];https://stackoverflow.com/questions/21149469
复制相似问题
腾讯云开发者
