Question

我对D3和角度都很新鲜，所以我不确定哪个部分是问题。我正在编写一个从API获取数据的应用程序，然后在页面上呈现数据的折线图。目前页面绘制轴并将它们适当地缩放到通过api发送的数据 - 但是我无法获得任何类型的线来显示。我对d3.line函数的角度函数有点模糊，但摆弄它却根本无法改变直线。

我的makeChart（）函数的代码如下：

  makeChart(){
    var margin = {top: 20, right: 20, bottom: 30, left: 50},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

    var parseDate = this.d3.timeParse("%Y-%m-%d");

    var x = this.d3.scaleTime()
    .range([0, width])

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

    var xAxis = this.d3.axisBottom(x)

    var yAxis = this.d3.axisLeft(y)

    var line = this.d3.line()
    .x(function(d) { return x(d['date']); })
    .y(function(d) { return y(d['amount']); });
    console.log(line)


    var svg = this.d3.select("body").append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
        .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

      var data = this.housingDataArray.map(function(d) {
      return {
         date: parseDate(d[0]),
         amount: d[1]
      }
  })


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

    svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis);

    svg.append("g")
      .attr("class", "y axis")
      .call(yAxis)
    .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .text("Price ($)");

    svg.append("path")
      .data(data)
      .attr("class", "line")
      .attr("d", <any>line);

}

我使用此JSfiddle作为参考。我们正在使用的数据几乎完全相同 - 他的示例数组有一些预设数字，但我咀嚼的数据也是一组包含索引0和a的日期的2个项目数组指数1的数字。

我已经尝试将很多不同的东西插入到.line上的.x和.y函数中 - 但它们似乎都没有任何效果。获取控制台记录的行包括在下面 - 我认为没有数据被设置到该行。我相信我对.line函数有一些基本的误解，但文档很密集，而且我没有取得任何进展。

编辑：这是调用函数的代码

ngOnInit() {
    this.grabRentPerSquareFoot()
  }
grabRentPerSquareFoot(){
    this.http.get('https://www.quandl.com/api/v3/datasets/ZILL/Z60618_RZSF.json').subscribe(response => {
        this.housingDataArray = response.json().dataset.data
        console.log(this.housingDataArray)
        this.makeChart()
    })
  }

EDIT已解决：结果是语法错误，我正在使用＆＃34;数据＆＃34;而不是＆＃34;数据＆＃34;在致电回复后。

D3简单折线图不是角度

0 个答案: