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

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 进行数据加载。