尝试使用 then() 方法之外的函数对 d3.csv().then() Promise 对象中的数据进行排序时出现 TypeError

Question

我试图让用户在我正在处理的 D3 可视化中对一些运动统计数据进行排序。我正在使用 D3v6。

我很困惑为什么我可以使用 then() 方法之外的函数对数据进行排序，但是当我尝试使用排序后的数据时它会中断。

我已尝试创建以下问题的最小实现。
https://codepen.io/sspboyd/pen/rNWgOVr

sort_by(val) 函数工作并将 return 排序数组，但如果我尝试在 then() 函数中使用新排序的数据，我会收到错误消息。我得到的错误是：Uncaught (in promise) TypeError: items is undefined.

令人困惑的是，如果我在 then() 方法中执行完全相同的排序操作，它会起作用！？！

代码如下：

let svg = d3.select("body")
    .append("svg")
        .attr("width", 600)
        .attr("height", 800);


let player_data = d3.csv('./player_data.csv');

let sort_by = function(val){
    console.log(`Passed in value is: ${val}`);
    player_data.then(function(data){
        let new_data = data.slice().sort((a,b) => d3.descending(+a[val], +b[val]));
        console.log(new_data);
        return new_data;
    });
};

player_data.then(function(data){
    // let sorted_by_Assists = data.slice().sort((a,b) => d3.descending(+a.A, +b.A));

    // data = sorted_by_Assists; // <---- This works. 
    data = sort_by("A");         // <---- This does not work?!?!? Throws error: 
                                 //       "Uncaught (in promise) TypeError: items is undefined"


    let player_nodes = d3.select("svg")
        .selectAll("g")
        .data(data, d=>d.Player)
        .enter()
        .append("g")
            .attr("transform", function(d,i){return `translate(10,${i*30})`})
            .attr("class","player_node");

    let player_info = player_nodes
        .append("text")
            .attr("x",0)
            .attr("y",0)
            .attr("dy", "1em")
            .text(function(d){return `${d.Player} - Games Played: ${d.GP}, Points: ${d.P}, Goals: ${d.G}, Assists: ${d.A}`});
        });

我很困惑，所以感谢您的帮助或建议！

Answer 1

在 codepen 中提到的第 23 行中，将已解析的 data 传递给 sort_by 函数

data = sort_by("A", data);

现在 sort_by 功能将

let sort_by = function(val, playerData){
    console.log(`Passed in value is: ${val}`);
    if(playerData) {
      return sortLogic(val, playerData)
    } else {
      player_data.then(function(data){
        return sortLogic(val, data); 
      });
    }
};

let sortLogic = function (val, data) {
  let new_data = data.slice().sort((a,b) => d3.descending(+a[val], +b[val]));
  console.log(new_data);
  return new_data;
}

尝试使用 then() 方法之外的函数对 d3.csv().then() Promise 对象中的数据进行排序时出现 TypeError

Getting TypeError when trying to sort data within a d3.csv().then() Promise object using a function outside of the then() method

javascript

d3.js

es6-promise