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

Question

我正在制作 D3 中的折线图，该折线图以从 API 检索的 JSON 格式显示数据。

我在 D3 的网站上找到了一个示例折线图项目，它看起来相对简单。该示例与我的项目之间的主要区别在于，该示例使用来自本地 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 函数/API 请求的正确方法是什么？

我的 JSON 如下所示：https : //min-api.cryptocompare.com/data/histoday?fsym=ETH&tsym=USD&limit=2&aggregate=3&e=CCCAGG

Answer 1

之间的差d3.csv和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>

希望这可以帮助。