Javascript D3 v4：使用XML Http请求中的JSON数据的条形图线性刻度

我正在努力使用D3V4创建一个条形图，以使用从XMLHTTP请求中提取的数据绘制一个条形图。这是FreeCodeCamp D3认证的第一个挑战：

我设法将数据作为JSON对象提取，并且可以使用D3对其进行迭代。JSON对象如下所示：

 {
  "errors": {},
  "id": 120140,
  "source_name": "Federal Reserve Economic Data",
  "source_code": "FRED",
  "code": "GDP",
  "name": "Gross Domestic Product, 1 Decimal",
  "urlize_name": "Gross-Domestic-Product-1-Decimal",
  "display_url": "http://research.stlouisfed.org/fred2/data/GDP.txt",
  "description": "Units: Billions of Dollars\nSeasonal Adjustment: Seasonally Adjusted Annual Rate\nNotes: A Guide to the National Income and Product Accounts of the United States (NIPA) - (http://www.bea.gov/national/pdf/nipaguid.pdf)",
  "updated_at": "2015-12-14T20:00:28.561Z",
  "frequency": "quarterly",
  "from_date": "1947-01-01",
  "to_date": "2015-07-01",
  "column_names": [
    "DATE",
    "VALUE"
  ],
  "private": false,
  "type": null,
  "premium": false,
  "data": [
    [
      "1947-01-01",
      243.1
    ],
    [
      "1947-04-01",
      246.3
    ],
    [
      "1947-07-01",
      250.1
    ],
    [
      "1947-10-01",
      260.3
    ],...}

“数据”：[]，

是我试图可视化的元素

我用数组中的整数画出了([ "1947-01-01", 243.1 ])但我正在努力的地方是应用比例尺，所以图表是在生成的范围内绘制的。我尝试对x轴和y轴使用

d3.scalelinear（）

：

//setting the scales for the chart
    const xScale = d3.scaleLinear()
                    .domain([0, d3.max(chart_data, (d) => d[0])])
                    .range([margin, width - margin]);

    const yScale = d3.scaleLinear()
                        .domain([0, d3.max(chart_data, (d) => d[1])])
                        .range([height - margin, margin]);

但当我尝试将xScale应用于图表的“x”属性或将yScale应用于te“height”属性时，我得到了一个NaN错误。我不确定我做错了什么

---

我已经将我的代码上传到JSFIDLE:

d[0]看起来像一个数字吗？不，是约会。所以xScale应该是一个时间刻度。将xScale域设置为

[0，max（d[0]）]

，然后调用

xScale（d[1]）

很可能会导致域外值。谢谢。我来试试你的解决办法。