Question

以下是使用d3.jes绘制折线图的JavaScript代码：

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");
}

Here's working fiddle, it creates the svg in the body, see source

d3.js Uncaught TypeError：o不是函数

2 个答案: