d3js - 我的折線圖不起作用

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：

您在一次又一次的讓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循環的： 將所有的代碼在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)); 

末。

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

應該

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

工作代碼here

希望這有助於！