很抱歉這可能是一個非常幼稚的問題，但我對 D3 很陌生，我已經為這個問題苦苦掙扎了幾天，試圖以多種不同的方式對其進行故障排除。
完全披露：我正在使用 D3 v7。
我一直在為我的公司串列訂單資料開發一個簡單的儀表板，它最終應該使用兩個不同的 CSV 檔案。我已經根據第一個檔案管理了可視化，并且我已經成功地根據另一個 CSV 檔案加載和生成了一個物件。問題是，每當我使用基于第二個 CSV 轉換此物件的函式時，它總是回傳未定義。
我知道資料已加載---我什至在開始時使用 Promise.all 加載了兩個 CSV---仍然沒有解決問題。我在下面分享的代碼可能看起來有點混亂，因為首先我使用了很多 console.logs 來檢測發生了什么，其次---我試圖以多種不同的方式調整它，坦率地說甚至不能立即記住所有調整的原因。
現在，在這一點上，如果這一切都是由某種型別的錯字引起的，我不會感到驚訝，而我的選擇性失明以某種方式掩蓋了這些錯字。無論如何，如果您能評論我如何繼續解決此代碼的問題，我將不勝感激。
現在——這是兩個似乎發生沖突的功能。addOrderData 獲取產品的 SKU 和包含訂單資料的物件，根據 SKU 過濾訂單，根據日期對訂單進行分組并使用匯總對它們進行匯總，然后回傳結果物件。我可以看到所有操作在執行函式時都有效，除了 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 始終回傳未定義，即使我可以在控制臺中看到該函式正在正確運行。你可以在這里看到我已經嘗試使用 .then() 陳述句來解決這個問題，但仍然——“then”只是繼續對未定義的物件進行操作，這會導致其他函式出錯。
很抱歉所有的代碼混亂，我通常用 Python 和 JS 編程，一般來說對我來說很新。我將不勝感激任何關于該做什么的提示。
干杯，拉夫
uj5u.com熱心網友回復：
以下段落是您的問題，因為您在分配給任何值之前將 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);
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/334611.html
標籤：d3.js
上一篇：如何設定圖示的百分比高度，并將其垂直居中，同時向左浮動？
下一篇：為什么getItem在我的代碼中使用asyncStorage回傳'Promise{"_U":0,"_V":0,"_W":null,