Question

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

如何克服这个问题。我无法发布您的完整代码，请访问我的插件以查看真正的问题。

$(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

错误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 - 我的折线图无效

1 个答案: