D3 可以加载的数据格式有哪些？（12种）

D3.js 支持多种数据格式，这些格式涵盖了从简单的表格数据到复杂的地理数据。以下是一些常见的数据格式及其加载方法：

D3.js 数据加载方法

1. d3.blob(input, init)- 用途: 加载二进制数据，返回一个 Blob 对象。- 参数: - input: 数据源 URL。- init: 可选的初始化对象，用于设置请求头等。- 返回: 返回一个 Promise，解析为 Blob 对象。- 示例:d3.blob("data.bin").then(blob=>{ console.log(blob);}).catch(error=>{ console.error("Error loading blob:", error);});
2. d3.buffer(input, init)- 用途: 加载二进制数据，返回一个 ArrayBuffer 对象。- 参数: - input: 数据源 URL。- init: 可选的初始化对象，用于设置请求头等。- 返回: 返回一个 Promise，解析为 ArrayBuffer 对象。- 示例:d3.buffer("data.bin").then(buffer=>{ console.log(buffer);}).catch(error=>{ console.error("Error loading buffer:", error);});
3. d3.csv(input, init, row)- 用途: 加载 CSV 格式的数据。- 参数: - input: 数据源 URL。- init: 可选的初始化对象，用于设置请求头等。- row: 可选的行处理函数，用于解析每一行数据。- 返回: 返回一个 Promise，解析为数组对象。- 示例:d3.csv("data.csv",row=>{return{ id:+row.id, value:+row.value };}).then(data=>{ console.log(data);}).catch(error=>{ console.error("Error loading CSV:", error);});
4. d3.dsv(delimiter, input, init, row)- 用途: 加载自定义分隔符的 CSV 格式数据。- 参数: - delimiter: 分隔符字符串。- input: 数据源 URL。- init: 可选的初始化对象，用于设置请求头等。- row: 可选的行处理函数，用于解析每一行数据。- 返回: 返回一个 Promise，解析为数组对象。- 示例:const parser = d3.dsvFormat("|");d3.dsv("|","data.dsv",row=>{return{ id:+row.id, value:+row.value };}).then(data=>{ console.log(data);}).catch(error=>{ console.error("Error loading DSV:", error);});
5. d3.html(input, init)- 用途: 加载 HTML 文档。- 参数: - input: 数据源 URL。- init: 可选的初始化对象，用于设置请求头等。- 返回: 返回一个 Promise，解析为 DocumentFragment 对象。- 示例:d3.html("data.html").then(doc=>{ console.log(doc);}).catch(error=>{ console.error("Error loading HTML:", error);});
6. d3.image(input, init)- 用途: 加载图像文件。- 参数: - input: 数据源 URL。- init: 可选的初始化对象，用于设置请求头等。- 返回: 返回一个 Promise，解析为 Image 对象。- 示例:d3.image("data.png").then(image=>{ console.log(image);}).catch(error=>{ console.error("Error loading image:", error);});
7. d3.json(input, init)- 用途: 加载 JSON 格式的数据。- 参数: - input: 数据源 URL。- init: 可选的初始化对象，用于设置请求头等。- 返回: 返回一个 Promise，解析为 JSON 对象。- 示例:d3.json("data.json").then(data=>{ console.log(data);}).catch(error=>{ console.error("Error loading JSON:", error);});
8. d3.svg(input, init)- 用途: 加载 SVG 文件。- 参数: - input: 数据源 URL。- init: 可选的初始化对象，用于设置请求头等。- 返回: 返回一个 Promise，解析为 DocumentFragment 对象。- 示例:d3.svg("data.svg").then(svg=>{ console.log(svg);}).catch(error=>{ console.error("Error loading SVG:", error);});
9. d3.text(input, init)- 用途: 加载纯文本文件。- 参数: - input: 数据源 URL。- init: 可选的初始化对象，用于设置请求头等。- 返回: 返回一个 Promise，解析为字符串。- 示例:d3.text("data.txt").then(text=>{ console.log(text);}).catch(error=>{ console.error("Error loading text:", error);});
10. d3.tsv(input, init, row)- 用途: 加载 TSV 格式的数据。- 参数: - input: 数据源 URL。- init: 可选的初始化对象，用于设置请求头等。- row: 可选的行处理函数，用于解析每一行数据。- 返回: 返回一个 Promise，解析为数组对象。- 示例:d3.tsv("data.tsv",row=>{return{ id:+row.id, value:+row.value };}).then(data=>{ console.log(data);}).catch(error=>{ console.error("Error loading TSV:", error);});
11. d3.xml(input, init)- 用途: 加载 XML 文件。- 参数: - input: 数据源 URL。- init: 可选的初始化对象，用于设置请求头等。- 返回: 返回一个 Promise，解析为 Document 对象。- 示例:d3.xml("data.xml").then(xml=>{ console.log(xml);}).catch(error=>{ console.error("Error loading XML:", error);});

12. Custom Formats (自定义格式)

• 用途: 如果你需要处理特殊格式的数据，可以使用 d3.dsv 或 d3.text 并自定义解析逻辑。
• 加载方法:d3.text("data.custom").then(data=>{const parsedData =parseCustomData(data);// 自定义解析函数 console.log(parsedData);}).catch(error=>{ console.error("Error loading custom format:", error);});functionparseCustomData(data){// 自定义解析逻辑return data.split("\n").map(line=> line.split(","));}

总结

D3.js 支持多种数据格式，包括 JSON、CSV、TSV、XML、HTML、GeoJSON、TopoJSON、纯文本文件、二进制文件和自定义格式。通过使用 D3.js 提供的加载方法，可以轻松地将这些数据加载到你的应用程序中，并进行进一步的处理和可视化。希望这些示例能帮助你更好地理解和使用 D3.js 进行数据加载。