D3.js 支持多种数据格式，这些格式涵盖了从简单的表格数据到复杂的地理数据。以下是一些常见的数据格式及其加载方法：
D3.js 数据加载方法
-
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); });
-
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); });
-
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); });
-
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); });
-
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); });
-
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); });
-
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); });
-
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); });
-
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); });
-
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); });
-
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); });function parseCustomData(data) {// 自定义解析逻辑return data.split("\n").map(line => line.split(",")); }
总结
D3.js 支持多种数据格式，包括 JSON、CSV、TSV、XML、HTML、GeoJSON、TopoJSON、纯文本文件、二进制文件和自定义格式。通过使用 D3.js 提供的加载方法，可以轻松地将这些数据加载到你的应用程序中，并进行进一步的处理和可视化。希望这些示例能帮助你更好地理解和使用 D3.js 进行数据加载。
