在另一个函数内部调用的D3函数总是返回undefined

Question

对不起，这可能是一个非常幼稚的问题，但我是D3的新手，我已经在这个问题上挣扎了几天了，试图以多种不同的方式解决这个问题。

全面披露:我使用D3 v7。

我一直在为我的公司列表订单数据制作一个简单的仪表板，它最终应该使用两个不同的CSV文件。我已经管理了基于第一个文件的可视化，并且我已经成功地加载并生成了基于另一个CSV文件的对象。问题是，每当我使用基于第二个CSV转换此对象的函数时，它总是返回未定义。

我知道数据是加载的——我甚至在开始时使用Promise加载了两个csv。这一切——仍然没有解决问题。我下面分享的代码可能看起来有点混乱，因为首先我使用了很多控制台。日志来检测哪里发生了什么，第二——我试过用很多不同的方法来调整它，坦率地说，我甚至不能立即记住所有调整的原因。

现在，如果这一切都是由某种打字错误引起的，我不会感到惊讶，因为我的选择性失明以某种方式掩盖了这种错误。无论如何，如果您能对我如何进行故障排除给出评论，我将不胜感激。

现在——这两个函数似乎是冲突的。addOrderData接受产品的SKU和包含订单数据的对象，根据SKU筛选订单，根据日期对它们进行分组，并在返回结果对象之前使用rollup对它们求和。我可以看到，当执行函数时，所有的操作都可以工作，除了返回语句:

function addOrderData(product_sku, datanew) {
datanew = datanew.filter(d => d['Variant SKU'] == product_sku)
seriesnew = datanew.map(d => ({
name: d['Product Title'],
sku: d['Variant SKU'],
count: d['Line Item quantity'],
fulfilled: parser(d['Fulfillment at'].substring(0, 10)),
created: parser(d['Created at'].substring(0, 10)),
paid: parser(d['Paid at'].substring(0, 10))
}))
console.log('ORDER DATA HERE A-COMIN!');
console.log(seriesnew);
let ordersByDate = d3.group(seriesnew, d => d.fulfilled)
// .rollup(v => {
//     total: d3.sum(v, d => d.count)
// })
console.log(ordersByDate)
let ordersByDateRolled = d3.rollup(seriesnew, v => d3.sum(v, d => d.count), d => d.fulfilled)
console.log('Bleeemmm!')
console.log(typeof(ordersByDateRolled))
console.log('Bloommm!')
return ordersByDateRolled;
}

现在，updatesselection函数重新加载对象(我知道这是非常低效的，但是在尝试排除所有我想要的东西的时候)，根据所选择的SKU绘制原始图表，并且应该根据订单数据绘制另一个图表:

function updateSelection() {
d3.select('#article_name_drop').on('change', function() {
d3.select(container).html(null);
Promise.all([
load_data(),
d3.csv('dk_orders.csv')
])
.then(data => {
bws = data[0]
orders = data[1]
populateDropdown(bws)
resetData();
let valuezz = this.value;
const sku = valuezz.split(' ')[0]
console.log(valuezz);
new_data = bws
new_data.series = bws.series.filter(d => d['name'] == valuezz)
console.log(new_data)
drawChart(container, new_data)
console.log('ADDING')
let summedOrderData;
console.log(sku);
console.log(orders)
summedOrderData = addOrderData(sku, orders).then(
console.log(summedOrderData),
console.log('ADDED'),
// console.log(summedOrderData)
drawSubChart(subcontainer, summedOrderData)
);
})
})
}

问题是——addOrderData在这里调用始终返回未定义，即使我可以在控制台中看到该函数正在正确运行。您可以在这里看到，我已经尝试使用.then()语句来解决这个问题，但是仍然——'then'只是继续作用于一个未定义的对象，这会导致其他函数出现错误。

抱歉所有的混乱的代码，我通常用Python和JS编程，一般是相当新的我。如果你能告诉我该怎么做，我会很感激的。

欢呼,英国皇家空军

Answer 1

下面的段落是你的问题，因为你是使用drawSubChart与summerOrderData之前分配给任何值

summedOrderData = addOrderData(sku, orders).then(
console.log(summedOrderData),
console.log('ADDED'),
// console.log(summedOrderData)
drawSubChart(subcontainer, summedOrderData)
);

与addOrderData一起使用也不会做任何事情，因为addOrderData没有返回承诺。

尝试以下操作:

1 -为addOrderData的结果分配summerOrderData

2 -使用summerOrderData和drawSubChart

summedOrderData = addOrderData(sku, orders);
drawSubChart(subcontainer, summedOrderData);