Question

我正在尝试使用d3的线函数绘制高斯曲线。如下：

var xScale = d3.scale.linear()
        .range([0, width]);

    var yScale = d3.scale.linear()
        .range([height, 0]);

    var xAxis = d3.svg.axis()
        .scale(xScale)
        .orient("bottom");

    var yAxis = d3.svg.axis()
        .scale(yScale)
        .orient("left");

    this.getData();

    var line = d3.svg.line()
    .x(function(d) {
        return xScale(d.x);
    })
    .y(function(d) {
        return yScale(d.y);
    });

  getData() {
    var x,y;
    for (var i = 0; i < 100000; i++) {
        x = this.normal() // calc random draw from normal dist
        y = this.gaussian(x) // calc prob of rand draw
        let point = {
            "x": x,
            "y": y
        }
        this.data.push(point)
    };
}

其中data初始化为类变量，例如：private data;。问题在于此行：

var line = d3.svg.line()
    .x(function(d) {
        return xScale(d.x);
    })
    .y(function(d) {
        return yScale(d.y);
    });

这给了我一个错误，提示Property 'x' does not exist on type [number, number]，而与d关联的唯一属性是d['0']和d['1']。但是我已经看到这种结构在很多地方都使用过。为什么在这里不起作用？我做错了什么吗？

Answer 1

事实证明这是一个打字问题，实际上是用打字稿编写的代码，由于某种原因，line ()的键入是为了期望使用[number, number]类型。添加说明符line<any>()可以解决此问题。像这样

var line = d3.svg.line<any>()
    .x(function(d) {
        return xScale(d.x);
    })
    .y(function(d) {
        return yScale(d.y);
    });

d3.svg.line（）的异常行为？

1 个答案: