Question

我是D3的新手，并且在服务器端开发方面有一些背景，我发现一些令人困惑的事情。我仍然很难理解如何从外部来源获取数据。就我而言，我可以看到从数据库中按需提取数据并将其可视化的好处，但这些数据如何进入D3？我试图通过Ajax将其拉入，但我还没有找到一个很好的D3 v4演示来涵盖这个。有吗？大多数人写入csv / json / tsv文件并导入这种方式吗？

Answer 1

D3 v4使用d3-request获取数据XMLHttpRequest。自v5起，d3-request已弃用，但赞成使用新d3-fetch的fetch API并返回Promise。

D3并不依赖于任何特殊的数据结构，所以这些只是为了方便起见。您还可以使用任何库或API来获取您喜欢的数据。

在这些模块的文档中有使用d3-request和d3-fetch的代码段，如果您想查看更完整的示例，此basic bar chart将从TSV加载数据建立条形图。

文档中的gallery以及许多优秀tutorials中有更多示例。

Answer 2

所以你是对的，大多数D3示例使用以下形式的d3.csv或d3.json：

d3.csv("myfile.csv", function(data) {
    d3.select("svg")
      .selectAll("circle")
      .join(data)
      ...
});

然而，这仅仅是为了方便实施例。如果您知道自己的数据将基于JSON，那么您可以使用d3.json来简单地调用您的API。

但是，您可以使用常规API请求同样执行此操作。以下是使用vanilla JavaScript中提供的新fetch API的示例：

const render = (data) => {
    d3.select("svg")
      .selectAll("circle")
      .join(data)
      ...
};

const request = new Request("/myAPI/myRoute/getAllCircles");
fetch(request)
    .then((response) => response.json()) // Convert to JSON format
    .then((jsonData) => {  render(jsonData); });

将数据拉入d3.js

2 个答案: