D3.js 请求

请求（Requests）

每当网络浏览器希望请求资源时，无论是 HTML 文件、JPEG 图像还是 CSV 文件，它都会使用HTTP 请求。通常，您希望请求的数据（或资源）将具有URL（统一资源定位器），例如https://assets.codepen.io/2814973/my-csv.csv.

D3 使请求数据相对简单。它处理 HTTP 请求，还可以将传入的数据转换为有用的格式。例如，它可以请求 CSV文件并将其转换为对象数组。

• 请求 CSV 数据

function update(data) {
  d3.select('#content tbody')
    .selectAll('tr')
    .data(data)
    .join('tr')
    .html(function(d) {
      let html = '<tr>';
      html += '<td>' + d.company + '</td>';
      html += '<td>' + d.industry + '</td>';
      html += '<td>' + d.revenue + '</td>';
      html += '<td>' + d.workers + '</td>';
      html += '</tr>';
      return html;
    });
}

d3.csv('https://assets.codepen.io/2814973/Inc5000+Company+List_2014-top250.csv')
  .then(function(data) {
    update(data);
  });

d3.csv接受 URL 作为其第一个参数并返回一个Promise对象。

一个 promise 对象代表一个异步操作。异步操作是其结果是未来某个时间的操作。这意味着您的代码可以在发起请求后立即继续运行。当浏览器接收到请求的数据时，promise 就完成了，传递给 promise.then方法的函数就会被调用。

完成请求后，D3 将传入的 CSV 文件转换为对象数组。每个对象代表一行数据：

[
  {
    "rank": "1",
    "workers": "227",
    "company": "Fuhu",
    "state_l": "California",
    "city": "El Segundo",
    "growth": "158956.9106",
    "revenue": "195640000",
    "industry": "Consumer Products & Services"
  },
  {
    "rank": "2",
    "workers": "191",
    "company": "Quest Nutrition",
    "state_l": "California",
    "city": "El Segundo",
    "growth": "57347.9246",
    "revenue": "82640563",
    "industry": "Food & Beverage"
  },
  {
    "rank": "3",
    "workers": "145",
    "company": "Reliant Asset Management",
    "state_l": "Virginia",
    "city": "Arlington",
    "growth": "55460.1646",
    "revenue": "85076502",
    "industry": "Business Products & Services"
  },
  ...
]

行转换：D3 将 CSV 文件中的数字解释为字符串。可以在代码中的任何位置将字符串转换为数字，但我建议直接进行转换。这可以通过将函数d3.csv作为第二个参数传入来完成。对每一行数据调用该函数，然后返回一个带有任何适当转换的新对象。

function convertRow(d) {
  return {
    rank: +d.rank,
    workers: +d.workers,
    name: d.company,
    state: d.state_l,
    city: d.city,
    growth: +d.growth,
    revenue: +d.revenue,
    sector: d.industry
  }
}

d3.csv('https://assets.codepen.io/2814973/Inc5000+Company+List_2014-top250.csv', convertRow)
  .then(function(data) {
    console.log(data);
  });

• 请求 TSV 数据：TSV 数据是制表符分隔值数据，其处理方式与 CSV 类似。用于d3.tsv加载 TSV 数据。
• 请求 JSON 数据：JSON 是一种密切反映 JavaScript 数组和对象的文件格式。它允许嵌套结构，使其优于表格文件格式。

function update(data) {
  d3.select('#content tbody')
    .selectAll('tr')
    .data(data)
    .join('tr')
    .html(function(d) {
      let html = '<tr>';
      html += '<td>' + d.name + '</td>';
      html += '<td>' + d.indicator1 + '</td>';
      html += '<td>' + d.indicator2 + '</td>';
      html += '</tr>';
      return html;
    });
}

d3.json('https://assets.codepen.io/2814973/my-json.json')
  .then(function(data) {
    update(data);
  });

当 JSON 文件到达时，D3 将其转换为 JavaScript 数组或对象。与 CSV 数据不同，JSON 数据不一定是对象数组，因此d3.json不支持行转换函数。