将csv导入d3;无法将字符串转换为数字 [英] Importing a csv into d3; can't convert strings to numbers

问题描述

我有一个csv文件，数据如下：

 时间，条件，温度，湿度，WindDir，WindDeg，U1 ，压力，U2，U3，U4，U4，UV，U5，MoonPercent，SunriseHr，SunriseMin，SunsetHr 
2014/06/19 19:00:00，Clear，16.8，87％ 北，355,8.0，1010，11，15，NA，1.2，0，11，47，5，03 07
2014/06/19 19:31:01，多云，17.2，86％，NNE，26,129，1010，11，15， NA，0.7，0，11，47，5，0322，07
2014/06/19 19:40:00 大多云，17.4，85％，ENE，68,6.4，1010，11，15，NA，0.7，0，11，47 5，0322，07
  

array

  Object {Time =2014/06/19 19:00:00，Conditions =Clear，temperature =16.8，更多...} 
  

问题是，无论我尝试什么，我不能把数字变成实际的数字，只是NaN。这是我的导入代码：

  d3.csv（weatherLog.csv，function（error，csv）{
 if（error）return console.warn（error）; 
 
 csv.forEach（function（d）{（d ['Temperature'] = + d ['Temperature']）;}）; 
 console.log（csv）; 
  

我尝试d.Temperature替换，我试过parseInt d。['Temperature']），但没有什么工作，当然d3不能使用字符串（或NaN）作为数据，所以我需要转换这个第一，不知何故我试着手动删除的空间从CSV文件（所以导入的字符串是16.8而不是16.8），但是没有帮助...

解决方案

你应该使用一个访问器函数将字符串转换为日期和数字，这样做的方法是使用 .row（）方法，您的csv，并为每一行，让您提供一个输出对象，将用于表示该行，基于给定的数据。

给访问者的参数， d 表示单行或基准。在访问器函数中， d 具有与数据列的名称相对应的属性，例如 Time ，条件， Temperature 等等。你可以在返回输出对象之前操作这些值，所以在温度的情况下可以将输出对象的温度属性指定为 + d.Temperature ，将其转换为数字。 / p>

按照惯例，属性名称是在JavaScript中的驼峰式的，所以从访问器返回的对象应该使用驼峰式键。

现在当回调运行时，你的变量 csv 包含一个对象数组，每个对象都有 time ，条件，温度等，温度值已转换为数字。 / p>

下面是一个例子：

  d3.csv csv'）
 .row（function（d）{
 //对于数据的每一行，创建一个具有这些属性的对象... 
 return {
 time：d3 .time.format（'％Y /％m /％d％H：％M：％S'）parse（d.Time），
条件：d.Conditions，
 temperature：+ d 。温度，
湿度：d.Humidity，
 windDir：d.WindDir，
 windDeg：+ d.WindDeg，
 pressure：+ d.Pressure 
} 
}）
 .get（function（error，csv）{
 if（！error）{
 //让你想把所有的温度记录到控制台
 csv.forEach（function（d，i）{
 var theTime = d3.time.format（'％I：％M％p'）（d.time）; 
 console.log 'the temperature at'，theTime，'was'，d.temperature，'degrees。'）; 
}）; 
} else {
 // handle error 
} b $ b}）; 
  

这会将以下内容输出到控制台：

  7:00 PM的温度为16.8度。 
 7:31 PM的温度为17.2度。 
 7:40 PM的温度为17.4度。 
  

I have a csv file with data as follows:

Time, Conditions, Temperature, Humidity, WindDir, WindDeg, U1, Pressure, U2, U3, U4, U4, UV, U5, MoonPercent, SunriseHr, SunriseMin, SunsetHr
"2014/06/19 19:00:00", "Clear", 16.8, "87%", "North", 355, 8.0, "1010", "11", 15, "NA", "1.2", " 0", "11", "47", "5", "03" "22", "07"
"2014/06/19 19:31:01", "Mostly Cloudy", 17.2, "86%", "NNE", 26, 12.9, "1010", "11", 15, "NA", "0.7", " 0", "11", "47", "5", "03" "22", "07"
"2014/06/19 19:40:00", "Mostly Cloudy", 17.4, "85%", "ENE", 68, 6.4, "1010", "11", 15, "NA", "0.7", " 0", "11", "47", "5", "03" "22", "07"

I want to import it and have array contain the numbers as numbers, not as strings as it does at first:

Object { Time="2014/06/19 19:00:00", Conditions=" "Clear"", Temperature=" 16.8", more...}

The problem is, no matter what I try I've not been able to turn the numbers into actual numbers, just NaN. Here's my import code:

d3.csv("weatherLog.csv", function(error, csv) {
        if (error) return console.warn(error);

        csv.forEach(function(d){ (d['Temperature'] = +d['Temperature']); });
        console.log(csv);

I tried d.Temperature instead, I tried parseInt(d.['Temperature']) instead, but nothing works out, and of course d3 can't use a string (or a NaN) as data so I need to convert this first somehow. I tried manually removing the space from the CSV file (so the imported string was "16.8" rather than " 16.8") but that didn't help either...

解决方案

You should use an accessor function to convert the strings to dates and numbers. The way to do that is to use the .row() method, which iterates over the rows of your csv, and for each row, lets you provide an output object that will be used to represent that row, based on the given data.

The parameter given to the accessor, d, represents a single row, or datum. Within the accessor function, d has properties corresponding to the names of your data columns, such as Time, Conditions, Temperature, etc... You can manipulate these values before returning your output object, so in the case of temperature, you could assign the temperature property of your output object to be +d.Temperature, which converts it to a number.

By convention, property names are camel cased in JavaScript, so the object you return from the accessor should use camel cased keys.

Now when your callback runs, your variable csv contains an array of objects, each of which has properties such as time, conditions, temperature, etc... and the values for temperature have been converted to numbers.

Here is an example:

d3.csv('weatherLog.csv')
  .row(function(d) {
    // for each row of the data, create an object with these properties...
    return {
      time: d3.time.format('%Y/%m/%d %H:%M:%S').parse(d.Time),
      conditions: d.Conditions,
      temperature: +d.Temperature,
      humidity: d.Humidity,
      windDir: d.WindDir,
      windDeg: +d.WindDeg,
      pressure: +d.Pressure
    };
  })
  .get(function(error, csv) {
    if (!error) {
      // lets say you want to log all the temperatures to the console
      csv.forEach(function(d,i) {
        var theTime = d3.time.format('%I:%M %p')(d.time);
        console.log('The temperature at', theTime, 'was', d.temperature, 'degrees.');
      });
    } else {
      // handle error
    }
  });

This will output the following to console:

The temperature at 7:00 PM was 16.8 degrees.
The temperature at 7:31 PM was 17.2 degrees.
The temperature at 7:40 PM was 17.4 degrees.

这篇关于将csv导入d3;无法将字符串转换为数字的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！