d3js - 我的折线图不工作

Question

我正在尝试使用 d3js 绘制 line-chart。但它似乎不起作用，我也没有得到任何 error。

如何克服这个问题。我无法 post 你的完整代码，请访问我的 plunk 以查看真正的问题。

$(function () {

// the part not working for me

datas.forEach(function(d) {


  d.date = parseDate(d.date);
  d.close = d.close;

  // Scale the range of the data
    x.domain(d3.extent(d, function(d) { 
      return d.date; 

    }));

    y.domain([0, d3.max(d, function(d) { return d.close; })]);

    // Add the valueline path.
    svg.append("path")
        .attr("class", "line")
        .attr("d", valueline(d));

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

    // Add the Y Axis
    svg.append("g")
        .attr("class", "y axis")
        .call(yAxis);

});


})

Live Demo

Answer 1

错误一：

您在 for 循环中一次又一次地创建 x 和 y 的域。

datas.forEach(function(d) {


  d.date = parseDate(d.date);
  d.close = d.close;

  // Scale the range of the data
    x.domain(d3.extent(d, function(d) { 
      return d.date; 

    }));

嗯，您根本不需要 for 循环。将所有带 for 循环的代码移到外面：

// Get the data 
x.domain(d3.extent(datas, function(d) { 
      d.date = parseDate(d.date);//convert d.date to date using parser.
      return d.date; 
    }));
    y.domain([0, d3.max(datas, function(d) { return d.close; })]);



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

    // Add the Y Axis
    svg.append("g")
        .attr("class", "y axis")
        .call(yAxis);    
      svg.append("path")
        .attr("class", "line")
        .attr("d", valueline(datas));

最后一个：

而不是在 for 循环中创建这样的路径。

   svg.append("path")
        .attr("class", "line")
        .attr("d", valueline(d));

应该是

  svg.append("path")
    .attr("class", "line")
    .attr("d", valueline(datas));

工作代码here

希望对您有所帮助！

d3js - 我的折线图不工作

d3js - my line chart is not working

linechart

d3.js