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);
  });
  
  function parseCustomData(data) {
    // 自定义解析逻辑
    return data.split("\n").map(line => line.split(","));
  }
  

总结

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