p5.js loadTable()用法及代碼示例

loadTable()函數用於讀取文件或URL的內容並從中創建p5.Table對象。 options參數可用於定義期望讀取數據的格式類型。所有加載和保存的文件均采用UTF-8編碼。

該函數是異步的，因此建議在preload()函數中調用該函數，以確保該函數先於其他函數執行。

用法:

loadTable(filename, options, [callback], [errorCallback])

或者

loadTable(filename, [callback], [errorCallback])

參數：該函數接受上麵提到和下麵描述的四個參數。

filename:這是一個字符串，表示必須從中加載數據的文件路徑或URL。
options:它是一個字符串，表示要加載的文件的格式。可以是“csv”(使用逗號分隔值加載表)，也可以是“tsv”(使用製表符分隔值加載表)。還可以指定值“header”來表示表是否具有標題值。通過將它們作為單獨的參數傳遞，可以使用多個命令。它是一個可選參數。
callback:當該函數成功執行時，將調用此函數。此函數的第一個參數是從文件加載的XML數據。它是一個可選參數。
errorCallback:如果執行該函數時有任何錯誤，則調用該函數。此函數的第一個參數是錯誤響應。它是一個可選參數。

以下示例說明了p5.js中的loadTable()函數：

範例1：

// Contents of books.csv 
  
// Book One, Author One, Price One 
// Book Two, Author Two, Price Two 
// Book Three, Author Three, Price Three 
  
let loadedTable = null; 
  
function setup() { 
  createCanvas(500, 300); 
  textSize(18); 
  
  text("Click on the button below to"+ 
       " load Table from file", 20, 20); 
  
  // Create a button for loading the table 
  loadBtn = createButton("Load Table from file"); 
  loadBtn.position(30, 50) 
  loadBtn.mousePressed(loadFile); 
} 
  
function loadFile() { 
  
  // Load the table from file 
  loadedTable = loadTable('books.csv', 'csv', onFileload); 
} 
  
function onFileload() { 
  text("Table loaded successfully...", 20, 100); 
  
  // Display through the table 
  for (let r = 0; r < loadedTable.getRowCount(); r++) { 
    for (let c = 0; c < loadedTable.getColumnCount(); c++) { 
      text(loadedTable.getString(r, c),  
            20 + c * 200, 150 + r * 20); 
    } 
  } 
}

輸出：
load-table

範例2：

// Contents of books_header.csv 
  
// title, author, price 
// Book One, Author One, Price One 
// Book Two, Author Two, Price Two 
// Book Three, Author Three, Price Three 
  
let loadedTable = null; 
  
function setup() { 
  createCanvas(500, 300); 
  textSize(22); 
  
  text("Click on the button below to "
       + "load Table from file", 20, 20); 
  
  // Create a button for loading the table 
  loadBtn = createButton("Load Table from file"); 
  loadBtn.position(30, 50) 
  loadBtn.mousePressed(loadFile); 
} 
  
function loadFile() { 
  // Load the table from file with headers 
  loadedTable = loadTable('books_header.csv', 
                'csv', 'header', onFileload); 
} 
  
function onFileload() { 
  text("Table loaded successfully...", 20, 100); 
  
  // Display the headers 
  for (let h = 0; h < loadedTable.getColumnCount(); h++) { 
    text(loadedTable.columns[h], 20 + h * 200, 150); 
  } 
  
  textSize(16); 
  // Display the data in the table 
  for (let r = 0; r < loadedTable.getRowCount(); r++) { 
    for (let c = 0; c < loadedTable.getColumnCount(); c++) { 
      text(loadedTable.getString(r, c),  
            20 + c * 200, 170 + r * 20); 
    } 
  } 
}

輸出：
load-table-headers

在線編輯： https://editor.p5js.org/

環境設置： https://www.geeksforgeeks.org/p5-js-soundfile-object-installation-and-methods/

參考： https://p5js.org/reference/#/p5/loadTable

相關用法

注：本文由純淨天空篩選整理自sayantanm19大神的英文原創作品 p5.js | loadTable() Function。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。