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

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

您正在创建值数组对象的命名属性(所有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 期望的形式输出的最简单方法是使用 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 */
}