D3.js 不读取 JSON

如果你使用过 D3.js，你应该知道它是一个数据可视化的 JavaScript 库。但是，你可能不知道它并不强制要求你使用 JSON 格式的数据。你可以把数据导入 d3.js 中的任何方式，只要符合特定的数据格式。

D3.js 支持的数据格式

D3.js 支持多种数据格式，包括：

• 数组
• CSV 文件
• TSV 文件
• XML 文件
• HTML 页面
• JSON 文件

下面是一个展示如何导入 CSV 格式数据的示例：

d3.csv("data.csv", function(data) {
  // Do something with data
});

导入数组

JSON 格式实际上是一个纯文本的数组，而 D3.js 手动创建数组也是很容易的。你可以在代码中创建一个数组并直接把它传递给 d3.js 的方法，就像这样：

var data = [4, 8, 15, 16, 23, 42];

d3.selectAll("p")
  .data(data)
  .enter()
  .append("p")
  .text(function(d) { return d; });

在上面的示例中，我们创建了一个包含六个数字的数组，并将其传递给 d3.selectAll() 方法。接下来，我们使用 .data() 方法来把这个数组绑定到将要被创建的

元素上。在 .enter() 选择集上，我们使用 .append() 方法添加每个

元素，并使用 .text() 方法将每个数字作为文本设置到元素的内容上。

结论

D3.js 不仅仅是一个 JSON 解析库，它支持多种数据格式。在和 D3.js 打交道时，了解这些数据格式有助于你更有效地使用这个库。