使用来自 API 的 JSON 数据的 D3 线图

Question

我正致力于在 D3 中制作线形图，以 JSON 格式显示从 API.

检索到的数据

我在 D3 的网站上找到了一个 example 折线图项目，它看起来比较简单。该示例与我的项目之间的主要区别在于，该示例使用本地 csv 文件中的数据，而不是 API 请求中的 JSON。

// This needs to be changed to my API request
d3.tsv("data.tsv", function(d) {
  d.date = parseTime(d.date);
  d.close = +d.close;
  return d;
}, function(error, data) {
  if (error) throw error;

  x.domain(d3.extent(data, function(d) { return d.date; }));
  y.domain(d3.extent(data, function(d) { return d.close; }));

  g.append("g")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(x))
    .select(".domain")
      .remove();

  g.append("g")
      .call(d3.axisLeft(y))
    .append("text")
      .attr("fill", "#000")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", "0.71em")
      .attr("text-anchor", "end")
      .text("Price ($)");

  g.append("path")
      .datum(data)
      .attr("fill", "none")
      .attr("stroke", "steelblue")
      .attr("stroke-linejoin", "round")
      .attr("stroke-linecap", "round")
      .attr("stroke-width", 1.5)
      .attr("d", line);
});

我将 csv 请求部分更改为此，因为我正在尝试从 API:

加载我的 JSON

    d3.json(url).get(function(d) {
    for(var i = 0; i < d.Data.length; i++) {
      coinValue.push(d.Data[i].close);
      dates.push(convertUnixTime(d.Data[i].time));
    }
    return d;
  }, function(error, data) {
  if (error) throw error;

这是行不通的。我很困惑为什么后面有一个逗号然后是另一个函数。

制作完全相同的折线图但使用 d3.json function/API 请求的正确方法是什么？

我的 JSON 看起来像这样：https://min-api.cryptocompare.com/data/histoday?fsym=ETH&tsym=USD&limit=2&aggregate=3&e=CCCAGG

Answer 1

d3.csv and d3.json 之间的区别是 访问器（第二个参数）。

d3.csv: d3.csv(url[[, row], callback]) 其中 row 只是获取数据的每一行，即如果您添加如下函数:

d3.csv(url, function(d) { // each row of the data }, callback)

d3.json: d3.json(url[, callback]) 不提供此每行 访问器。但您可以在回调中按如下方式执行此操作：

d3.json(url, function(err, data) { data.forEach(function(row) { // parse each row as required }); })

使用上述语法以及提供的示例代码和 JSON URL，这是绘制折线图的代码片段：

// This needs to be changed to my API request
d3.json("https://min-api.cryptocompare.com/data/histoday?fsym=ETH&tsym=USD&limit=2&aggregate=3&e=CCCAGG", function(error, d) {

 var data = d.Data;
  data.forEach(function(d){ d.time = new Date(d.time * 1000) });
  
  //console.log(data);
  if (error) throw error;

  var svg = d3.select("svg"),
      margin = {top: 20, right: 20, bottom: 30, left: 50},
      width = +svg.attr("width") - margin.left - margin.right,
      height = +svg.attr("height") - margin.top - margin.bottom,
      g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

  var parseTime = d3.timeParse("%d-%b-%y");

  var x = d3.scaleTime()
      .rangeRound([0, width]);

  var y = d3.scaleLinear()
      .rangeRound([height, 0]);

  var line = d3.line()
      .x(function(d) { return x(d.time); })
      .y(function(d) { return y(d.close); });
      
  x.domain(d3.extent(data, function(d) { return d.time; }));
  y.domain(d3.extent(data, function(d) { return d.close; }));

  g.append("g")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(x))
    .select(".domain")
      .remove();

  g.append("g")
      .call(d3.axisLeft(y))
    .append("text")
      .attr("fill", "#000")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", "0.71em")
      .attr("text-anchor", "end")
      .text("Price ($)");

  g.append("path")
      .datum(data)
      .attr("fill", "none")
      .attr("stroke", "steelblue")
      .attr("stroke-linejoin", "round")
      .attr("stroke-linecap", "round")
      .attr("stroke-width", 1.5)
      .attr("d", line);
});

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg width="960" height="500"></svg>

希望这对您有所帮助。

使用来自 API 的 JSON 数据的 D3 线图

D3 linegraph using JSON data from API

json

linegraph

request

d3.js