在NVD3中的ScatterChart - 从csv文件读取数据 [英] ScatterChart in NVD3 – Reading the data from csv file

问题描述

我试图从csv文件中读取数据，并想要使用NVD3中的scatterChart可视化此数据。

I am trying to read in data from csv file and want to visualise this data with a scatterChart in NVD3.

我将链接到JSfiddle或类似的东西但我不知道如何在这些在线JavaScript IDE中包括一个csv文件。这是可能吗？

I would have linked to a JSfiddle or something similar but I don't know how to include a csv file in these online JavaScript IDEs. Is that possible?

csv档案格式如下：

The csv file has the following format:

   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文件的代码是：

My best guess for the code to read the csv file with is:

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中，

I see my data in the DOM and it looks about right but the chart is not shown and instead it says 'No Data Available.' in bold letters where the chart should be.

这里没有在StockOverflow，也没有在NVD3中，没有显示图表而是显示无数据可用。在Github上的文档，或者在NVD3图表上的帮助网站上，我可以找到更多关于如何做到这一点的信息。

Neither here at StockOverflow, nor in the NVD3 documentation on Github, nor in the helpful website on NVD3 charts by cmaurer on GitHub could I find more information on how to do this.

推荐答案

p>将你的csv转换成JSON可以工作，但是没有必要。你只需要将数据格式化为内向。

Turning your csv into JSON would work, but isn't necessary. You've just got your data formatting methods inside-out.

你似乎期望对象包含三个数组，一个用于表中的每一列。

You seem to be expecting an object containing three arrays, one for each column in your table. The D3 methods create (and the NVD3 methods expect) an array of objects, one for each row.

当你执行

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

您正在创建值数组的命名属性 object 数组也是对象），但实际上不是使用 array 方法添加内容，所以数组的长度仍为零，NVD3将其视为一个空数组 - 并给出无数据警告。

You're creating named properties of the values array object (all Javascript arrays are also objects), but not actually adding content using array methods, so the length of that array is still zero and NVD3 sees it as an empty array -- and gives you the "no data" warning.

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

Instead of using the mapping function as you have it, you can use a single mapping function to do number formatting on the data array, and then set the result directly to be your values 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文件中的一行 - 并将它们传递给函数，然后从函数中获取返回值，并从中创建一个新数组。函数将替换传入的x和y属性的字符串版本对象与它们的数字版本，然后返回正确格式化的对象。

The mapping function takes all the elements in the csv array -- each one of which represents a row from your csv file -- and passes them to the function, then takes the returned values from the function and creates a new array out of them. The function replaces the string-version of the x and y properties of the passed in object with their numerical version, and then returns the correctly formatted object. The resulting array of formatted objects becomes the values array directly.

上述方法创建一个 >包含所有数据点的单个数据系列。如在注释中讨论的，如果您想要在工具提示中显示类别名称，那么这可能是一个问题 - NVD3工具提示会自动将系列名称显示为工具提示值。在上面的代码中，这将意味着每个点都将有工具提示Group1。

The above method creates a single data series containing all the data points. As discussed in the comments, that can be a problem if you want a category name to show up in the tooltip -- the NVD3 tooltip automatically shows the series name as the tooltip value. Which in the above code, would mean that every point would have the tooltip "Group1". Not terribly informative.

要格式化数据以获取有用的工具提示，您需要将每个点作为自己的数据系列。最简单的方法，使其发生，并有NVD3期望的形式输出，是与 d3.nest 。每个嵌套的子数组只有一个数据点，但这不是NVD3的问题。

To format the data to get useful tooltips, you need each point as its own data series. The easiest way to make that happen, and have the output in the form NVD3 expects, is with d3.nest. Each "nested" sub-array will only have one data point in it, but that's not a problem for NVD3.

创建每个点作为一个单独的系列的代码be：

The code to create each point as a separate series would be:

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 */
}

这篇关于在NVD3中的ScatterChart - 从csv文件读取数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！