d3.js未捕獲的TypeError：o不是函數

Question

這是我的JavaScript代碼，用於使用d3.jes繪制折線圖：

var h = 100;
var w = 200;

var monthlySales = [
    {"month":10, "sales":20},
    {"month":20, "sales":14},
    {"month":30, "sales":20},
    {"month":40, "sales":21},
    {"month":50, "sales":15},
    {"month":60, "sales":22},
    {"month":70, "sales":9},
    {"month":80, "sales":6},
    {"month":90, "sales":23},
    {"month":100, "sales":7}
];

var lineFunc = d3.line()
        .x(function(d){ return d.month * 2;})
        .y(function(d){return d.sales;})
        .curve("linear");
var svg = d3.select("body")
        .append("svg")
        .attr("width", w)
        .attr("height", h);
var viz = svg.append("path")
        .attr("d", lineFunc(monthlySales))
        .attr("stroke", "purple")
        .attr("stroke-width", 2)
        .attr("fill", "none");

它顯示此錯誤：

未捕獲的TypeError：o不是函數

 at t (d3.min.js:2) at d3.html:38 

這是觸發錯誤的d3.js代碼：

for(null==i&&(u=o(s=ve())),a=0;a<=f;++a)!(a<f&&r(c=t[a],a,t))===l.... 

Answer 1

這里的問題就是行生成器中的此方法：

.curve("linear");

在D3 v4.x中，沒有名為"linear"曲線。 看一下API 。

您可以簡單地將其刪除或選擇正確的曲線。 例如，

.curve(d3.curveBasis);

這是您所做的更改的代碼：

 var h = 100; var w = 200; var monthlySales = [{ "month": 10, "sales": 20 }, { "month": 20, "sales": 14 }, { "month": 30, "sales": 20 }, { "month": 40, "sales": 21 }, { "month": 50, "sales": 15 }, { "month": 60, "sales": 22 }, { "month": 70, "sales": 9 }, { "month": 80, "sales": 6 }, { "month": 90, "sales": 23 }, { "month": 100, "sales": 7 }]; var lineFunc = d3.line() .x(function(d) { return d.month * 2; }) .y(function(d) { return d.sales; }) .curve(d3.curveBasis); var svg = d3.select("body") .append("svg") .attr("width", w) .attr("height", h); var viz = svg.append("path") .attr("d", lineFunc(monthlySales)) .attr("stroke", "purple") .attr("stroke-width", 2) .attr("fill", "none"); 

 <script src="https://d3js.org/d3.v4.min.js"></script> 

Answer 2

您沒有正確傳遞函數，請嘗試以下操作：

function lineFunc(d) {
    d3.line()
        .x(function(d) {
            return d.month * 2;
        })
        .y(function(d) {
            return d.sales;
        })
        .curve("linear");
}

這是工作中的小提琴，它在體內創建了svg，請參見源