javascript - 将新行动态添加到具有从 csv 文件创建的标题的数组中

Question

我正在尝试动态(on_click 事件)将新行添加到使用 d3 从 CSV 文件加载的数组中。第一行已被识别为标题。

但是，新的行数据没有正确更新数组？

Date,Mcode,Weight,Reps,Points
2017/06/01,HIPABD,160.0,25,66
2017/06/02,STRETCH,,10,10
2017/06/03,TWISTS,25.0,50,20
2017/06/04,SBENDS,25.0,50,20

以下是相关代码片段。使用行转换器格式化日期和数字列。

我使用 on_click 事件添加新行。

//Function for converting CSV values from strings to Dates and numbers
        var rowConverter = function(d) {
            return {
                Date:    parseTime(d.Date),
                Mcode:             d.Mcode,              // No Conversion
                Weight:            parseFloat(d.Weight), // convert to floating point
                Reps:              parseFloat(d.Reps),   // convert to floating point
                Points:            parseFloat(d.Points)  // convert to floating point
                    };
                                       }

            // load dataset from csv file
            d3.csv("small_points_data.csv", rowConverter, function(error, csvdata) {
                if (error) {console.log(error);} // error detected, no data loaded
                 else {console.log(csvdata);}   // no error detected, data loaded
                       dataset = csvdata;       // once loaded, copy data to dataset variable


                //On click, update with new data
                d3.select("p")
                    .on("click", function() {

                        //Add one new value to dataset
                        dataset.push([2017/07/22,"SHLPRESS",55.0,10,78]);

以下是检查数组的结构和内容时控制台的输出。

第一个是从 CSV 文件加载的原始数组；这可以。 展开的是最后一行 (3) 和标题数组

第二个是执行 on_click 添加新行后的数组。展开的是原来的最后一行 (3)、新的最后一行 (4) 和标题数组。

dataset
(4) [{…}, {…}, {…}, {…}, columns: Array(5)]
0: {Date: Thu Jun 01 2017 00:00:00 GMT-0500 (Central Daylight Time), Mcode: "HIPABD", Weight: 160, Reps: 25, Points: 66}
1: {Date: Fri Jun 02 2017 00:00:00 GMT-0500 (Central Daylight Time), Mcode: "STRETCH", Weight: NaN, Reps: 10, Points: 10}
2: {Date: Sat Jun 03 2017 00:00:00 GMT-0500 (Central Daylight Time), Mcode: "TWISTS", Weight: 25, Reps: 50, Points: 20}

3:
Date: Sun Jun 04 2017 00:00:00 GMT-0500 (Central Daylight Time) {}
Mcode: "SBENDS"
Points: 20
Reps: 50
Weight: 25
__proto__: Object

columns: Array(5)
0: "Date"
1: "Mcode"
2: "Weight"
3: "Reps"
4: "Points"
length: 5
__proto__: Array(0)
length: 4
__proto__: Array(0)



*** after new row added ****

dataset
(5) [{…}, {…}, {…}, {…}, Array(5), columns: Array(5)]
0: {Date: Thu Jun 01 2017 00:00:00 GMT-0500 (Central Daylight Time), Mcode: "HIPABD", Weight: 160, Reps: 25, Points: 66}
1: {Date: Fri Jun 02 2017 00:00:00 GMT-0500 (Central Daylight Time), Mcode: "STRETCH", Weight: NaN, Reps: 10, Points: 10}
2: {Date: Sat Jun 03 2017 00:00:00 GMT-0500 (Central Daylight Time), Mcode: "TWISTS", Weight: 25, Reps: 50, Points: 20}

3:
Date: Sun Jun 04 2017 00:00:00 GMT-0500 (Central Daylight Time) {}
Mcode: "SBENDS"
Points: 20
Reps: 50
Weight: 25
__proto__: Object

4: Array(5)
0: 13.0974025974026
1: "SHLPRESS"
2: 55
3: 10
4: 78
length: 5
__proto__: Array(0)

columns: Array(5)
0: "Date"
1: "Mcode"
2: "Weight"
3: "Reps"
4: "Points"
length: 5
__proto__: Array(0)



**** this is the new row with nothing expanded ****

(5) [{…}, {…}, {…}, {…}, Array(5), columns: Array(5)]
0: {Date: Thu Jun 01 2017, Mcode: "HIPABD", Weight: 160, Reps: 25, Points: 66}
1: {Date: Fri Jun 02 2017 00:00:00 GMT-0500 (Central Daylight Time), Mcode: "STRETCH", Weight: NaN, Reps: 10, Points: 10}
2: {Date: Sat Jun 03 2017 00:00:00 GMT-0500 (Central Daylight Time), Mcode: "TWISTS", Weight: 25, Reps: 50, Points: 20}
3: {Date: Sun Jun 04 2017 00:00:00 GMT-0500 (Central Daylight Time), Mcode: "SBENDS", Weight: 25, Reps: 50, Points: 20}
4: (5) [13.0974025974026, "SHLPRESS", 55, 10, 78]
columns: (5) ["Date", "Mcode", "Weight", "Reps", "Points"]
length: 5
__proto__: Array(0)

新行 (4) 似乎存在许多问题:

1) 为什么它显示为 Array(5)，而第 (3) 行却没有显示？

2) 新行(4) 的值不会像行(3) 一样显示列名称。

3) 日期(第一列)未转换为日期格式，而是被视为方程。

问题:

我需要对代码进行哪些更改才能使动态添加的新行看起来和工作方式与从 CSV 文件加载的原始行类似？

数据集的最后一个控制台 View (未进行任何扩展)可以轻松查看从 CSV 文件加载的原始三行与动态添加的第四行之间的差异。

感谢您的帮助和建议。

Answer 1

一旦d3.csv完成对 CSV 的解析，并且您在回调中，就不再有行或列:忘记您拥有 CSV 结构，现在您只有一个 JavaScript 对象数组。

因此，解决方案是将新行作为对象推送，并带有相应的键。

例如，这是一个使用 d3.csvParse 的示例，因为我无法在 Stack Overflow 代码段中使用 d3.csv:

var csv = `Date,Mcode,Weight,Reps,Points
2017/06/01,HIPABD,160.0,25,66
2017/06/02,STRETCH,,10,10
2017/06/03,TWISTS,25.0,50,20
2017/06/04,SBENDS,25.0,50,20`;

var parseTime = d3.timeParse("%Y/%m/%d")

var rowConverter = function(d) {
  return {
    Date: parseTime(d.Date),
    Mcode: d.Mcode,
    Weight: parseFloat(d.Weight),
    Reps: parseFloat(d.Reps),
    Points: parseFloat(d.Points)
  };
}

var data = d3.csvParse(csv, rowConverter);

d3.select("p")
  .on("click", function() {
    data.push({
      Date: parseTime("2017/07/22"),
      Mcode: "SHLPRESS",
      Weight: 55.0,
      Reps: 10,
      Points: 78
    });
    console.log(data)
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<p>Click me</p>