使用API中的JSON数据的D3线形图

我正在D3中制作一个线条图，它以JSON格式显示从API检索的数据

我在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（url）.get（函数（d）{
对于（变量i=0；i

这不起作用。我不明白为什么后面会有一个逗号和另一个函数

使用d3.json函数/API请求生成完全相同的线图的正确方法是什么

我的JSON如下所示：

和之间的区别是访问器（第二个参数）

d3.csv:

d3.csv（url[，row]，callback]）

其中

row

只不过是所获取数据的每一行，即，如果您添加如下函数：

d3.csv（url，函数（d）{
//数据的每一行
}，回调）

d3.json:

d3.json（url[，回调]）

不在每行访问器中提供此功能。但您可以在回调中按如下方式执行此操作：

d3.json（url，函数（err，数据）{
data.forEach（函数（行）{
//根据需要分析每一行
});
})

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

//这需要更改为我的API请求
d3.json（“https://min-api.cryptocompare.com/data/histoday?fsym=ETH&tsym=USD&limit=2&aggregate=3&e=CCCAGG，函数（错误，d）{
var数据=d.数据；
data.forEach（函数（d）{d.time=newdate（d.time*1000）}）；
//控制台日志（数据）；
如果（错误）抛出错误；
var svg=d3。选择（“svg”），
边距={顶部：20，右侧：20，底部：30，左侧：50}，
宽度=+svg.attr（“宽度”）-margin.left-margin.right，
高度=+svg.attr（“高度”）-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，宽度]）；
变量y=d3.scaleLinear（）
.rangeRound（[高度，0]）；
var line=d3.line（）
.x（函数（d）{返回x（d.time）；}）
.y（函数（d）{返回y（d.close）；}）；
x、 域（d3.extent（数据，函数（d）{返回d.time；}））；
y、 域（d3.extent（数据，函数（d）{返回d.close；}））；
g、 附加（“g”）
.attr（“变换”、“平移（0）”、“高度+”）
.call（d3.axisBottom（x））
.select（“.domain”）
.remove（）；
g、 附加（“g”）
.呼叫（d3.左（y））
.append（“文本”）
.attr（“填充”、“千”）
.attr（“变换”、“旋转（-90）”）
.attr（“y”，6）
.attr（“dy”，“0.71em”）
.attr（“文本锚定”、“结束”）
.text（“价格（$）”）；
g、 附加（“路径”）
.基准（数据）
.attr（“填充”、“无”）
.attr（“笔划”、“钢蓝”）
.attr（“笔划线条连接”、“圆形”）
.attr（“笔划线头”、“圆形”）
.attr（“笔划宽度”，1.5）
.attr（“d”，行）；
})；