在另一个函数中调用的 D3 函数总是 returns undefined

Question

很抱歉这个问题可能会被证明是一个非常幼稚的问题，但我对 D3 还很陌生，我已经为这个问题苦苦挣扎了几天，试图在许多方面解决它不同的方式。

完全披露：我使用的是 D3 v7。

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

我知道数据已加载---我什至在开始时使用 Promise.all 加载了两个 CSV---仍然没有解决问题。我在下面分享的代码可能看起来有点精神错乱，因为首先我使用了很多 console.logs 来检测发生了什么，其次---我尝试以许多不同的方式调整它并且坦率地说，甚至不记得所有调整的原因。

现在，在这一点上，如果这一切都是由某种拼写错误引起的，我的选择性失明以某种方式掩盖了这一点，我不会感到惊讶。如果您能评论我如何继续解决此代码问题，我将不胜感激。

现在---这是两个似乎冲突的功能。 addOrderData 获取产品的 SKU 和包含订单数据的对象，根据 SKU 过滤订单，根据日期对它们进行分组，并在 return 生成结果对象之前使用 rollup 对它们求和。我可以看到执行该功能时所有操作都有效，除了 return 语句：

    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;
    }

现在，updateSelection 函数会重新加载对象（我知道这很低效，但在尝试解决所有问题时我有点想在所有地方都拥有所有内容），根据所选的 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 始终未定义 return，尽管我可以在控制台中看到该函数运行正确。你可以在这里看到我已经尝试使用 .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)
                );

将 then 与 addOrderData 一起使用也不会执行任何操作，因为 addOrderData 不会返回 Promise。

尝试以下操作：

1 - 将 summerOrderData 分配给 addOrderData

的结果

2 - 将 summerOrderData 与 drawSubChart 结合使用

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

在另一个函数中调用的 D3 函数总是 returns undefined

D3 function called inside another function always returns undefined

d3.js