Question

我正在尝试从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上的cmaurer的NVD3图表的有用网站上，我可以找到有关如何执行此操作的更多信息。

Answer 1

将您的csv转换为JSON会起作用，但不是必需的。您刚刚从内到外获得了数据格式化方法。

您似乎期待一个包含三个数组的对象，每个数组对应一个表。 D3方法创建（和NVD3方法期望的）一个对象数组，每行一个。

当你这样做时

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

您正在创建值数组 object 的命名属性（所有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属性的字符串版本替换为其数字版本，然后返回格式正确的对象。生成的格式化对象数组直接成为values数组。

修改

上述方法创建一个单个数据系列，其中包含所有数据点。正如评论中所讨论的，如果您希望在工具提示中显示类别名称，则可能会出现问题 - NVD3工具提示会自动将系列名称显示为工具提示值。在上面的代码中，这意味着每个点都会有工具提示“Group1”。没有太多信息。

要格式化数据以获得有用的工具提示，您需要将每个点作为自己的数据系列。实现这一目标的最简单方法是使用d3.nest，以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 */
}

Answer 2

您可以将数据放入变量中，正如Mike所描述的那样here：

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}
];

NVD3中的ScatterChart - 从csv文件中读取数据

2 个答案:

修改