我正在嘗試將資料從flask api 傳遞到chart.js。我們使用 D3 進行 api 呼叫：
var queryUrl = "http://127.0.0.1:5000/api/1/GenderOverTime";
var searchResults = [];
d3.json(queryUrl).then(function (chart_data) {
searchResults = chart_data;});
setTimeout(function(){init()},50)
這是我們遇到錯誤的部分：
function init(){
console.log("searchResults: ", searchResults);
let selector = d3.select("#selDataset");
let options = []
filtered_data_for_chart = searchResults.filter(result=>{
if (!options.includes(result.Sport)){
options.push(result.Sport)
selector
.append("option")
.text(result.Sport)
.property("value", result.Sport);
}
return result.Sport==="Gymnastics"
});
運行后init()，我們得到“ChartJSfile.js:14 Uncaught TypeError: searchResults.filter is not a function”。
在使用 api 之前，我們有另一個 js 腳本，其中保存為陣列物件的完全相同的資料，并且圖表和過濾器作業正常。
我們添加了setTimeout以允許一些時間來獲取資料，因為 init() 在資料加載到陣列之前正在運行。
資料樣本：
[{
"_id": {
"$oid": "61589a22cd5cc36ad5fc8898"
},
"Sport": "Aeronautics",
"Year": 1936,
"Sex": "M",
"Name": 1,
"Bronze": 0,
"Silver": 0,
"Gold": 1,
"No Win": 0,
"Attempts": 1,
"Wins": 1
},... ]
uj5u.com熱心網友回復：
您可以使用Array.from()從類陣列或可迭代物件創建新的、淺復制的 Array 實體。所以這應該可以解決您的問題：
const searchResultsList = Array.from(searchResults)
filtered_data_for_chart = searchResultsList.filter(result=>{...})
uj5u.com熱心網友回復：
如您所見，您的代碼似乎可以正常作業
您可能希望重構它以確保在需要時可以訪問搜索結果中的資料：
var queryUrl = "http://127.0.0.1:5000/api/1/GenderOverTime";
var searchResults = [];
d3.json(queryUrl).then(function (chart_data) {
searchResults = chart_data;
init(searchResults);
});
function init(results) {
console.log("searchResults: ", results);
let selector = d3.select("#selDataset");
let options = [];
filtered_data_for_chart = results.filter((result) => {
if (!options.includes(result.Sport)) {
options.push(result.Sport);
selector
.append("option")
.text(result.Sport)
.property("value", result.Sport);
}
return result.Sport === "Gymnastics";
});
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/326004.html
標籤：javascript d3.js 图表.js
上一篇：錯誤：<path>屬性d：預期的數字，“MNaN,NaNLNaN,NaNZ”
下一篇：使用d3強制網路適合邊界框